/* v1.6 – echte Kanzlei-Fotografie und Inhaberprofil */

.hero-visual--real {
  overflow: hidden;
  border-radius: clamp(1.2rem, 2vw, 2rem);
  border: 1px solid rgba(215, 163, 91, .28);
  box-shadow: 0 2.3rem 5rem rgba(0, 0, 0, .34);
  isolation: isolate;
}

.hero-visual--real::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 14, 26, .58) 0%, rgba(5, 14, 26, .08) 45%, rgba(5, 14, 26, .24) 100%),
    linear-gradient(180deg, transparent 60%, rgba(5, 14, 26, .5));
  pointer-events: none;
}

.hero-visual--real .hero-visual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.82) contrast(1.06) brightness(.83);
  transform: scale(1.035);
  animation: realHeroDrift 18s ease-in-out infinite alternate;
}

.hero-visual--real .hero-visual__veil { z-index: 3; opacity: .28; }
.hero-visual--real .paper-stack,
.hero-visual--real .folder,
.hero-visual--real .pen,
.hero-visual--real .glass,
.hero-visual--real .desk-glow { display: none !important; }

@keyframes realHeroDrift {
  from { transform: scale(1.035) translate3d(-.4%, 0, 0); }
  to { transform: scale(1.085) translate3d(.8%, -.8%, 0); }
}

.story__visual--owner {
  min-height: 43rem;
  position: relative;
  display: grid;
  place-items: center;
}

.owner-portrait {
  position: relative;
  width: min(100%, 34rem);
  height: 42rem;
  overflow: hidden;
  margin: 0;
  border-radius: 1.75rem;
  background: #0b1726;
  border: 1px solid rgba(180, 128, 66, .32);
  box-shadow: 0 2.5rem 5rem rgba(8, 17, 28, .2);
}

.owner-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 12, 22, .18) 58%, rgba(4, 12, 22, .92) 100%);
  pointer-events: none;
}

.owner-portrait::after {
  content: "";
  position: absolute;
  inset: .8rem;
  z-index: 2;
  border: 1px solid rgba(230, 185, 113, .18);
  border-radius: 1.2rem;
  pointer-events: none;
}

.owner-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 42%;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
}

.owner-portrait:hover img { transform: scale(1.035); filter: saturate(1.04); }

.owner-portrait figcaption {
  position: absolute;
  z-index: 3;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  color: #fff8eb;
}

.owner-portrait figcaption span,
.owner-portrait figcaption small {
  display: block;
  font-family: var(--font-sans, sans-serif);
}

.owner-portrait figcaption span {
  color: #d9a65f;
  font-size: .73rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}

.owner-portrait figcaption strong {
  display: block;
  font-family: var(--font-serif, serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: .7rem;
}

.owner-portrait figcaption small { color: rgba(255,255,255,.72); font-size: .9rem; }

.story__visual--owner .story__badge {
  right: -.75rem;
  bottom: 3rem;
  z-index: 4;
}

.owner-quote {
  margin: 2rem 0 2.2rem;
  padding: 1.4rem 1.6rem 1.4rem 2rem;
  border-left: 2px solid #c7904d;
  background: linear-gradient(90deg, rgba(196,144,77,.1), transparent);
  color: #243348;
  font-family: var(--font-serif, serif);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.55;
}

.office-gallery {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(197, 143, 74, .12), transparent 32%),
    #071322;
  color: #f6efe4;
}

.office-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(30deg, transparent 24%, rgba(202,153,87,.13) 25%, rgba(202,153,87,.13) 26%, transparent 27%, transparent 74%, rgba(202,153,87,.13) 75%, rgba(202,153,87,.13) 76%, transparent 77%),
    linear-gradient(150deg, transparent 24%, rgba(202,153,87,.1) 25%, rgba(202,153,87,.1) 26%, transparent 27%, transparent 74%, rgba(202,153,87,.1) 75%, rgba(202,153,87,.1) 76%, transparent 77%);
  background-size: 5.2rem 9rem;
  pointer-events: none;
}

.office-gallery .section__head { position: relative; z-index: 1; align-items: end; }
.office-gallery .section__head h2 { color: #f7f0e5; }
.gallery-intro { max-width: 31rem; color: rgba(238,243,248,.7); line-height: 1.7; }

.office-gallery__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.55fr .8fr .8fr;
  grid-template-rows: 18rem 18rem;
  gap: 1rem;
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 1.35rem;
  border: 1px solid rgba(210,160,94,.22);
  background: #102033;
  cursor: zoom-in;
  text-align: left;
  box-shadow: 0 1.3rem 3rem rgba(0,0,0,.2);
}

.gallery-tile--wide { grid-column: 1; grid-row: 1 / 3; }
.gallery-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.gallery-tile:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.8,.2,1), filter .8s ease;
  filter: saturate(.86) brightness(.86);
}
.gallery-tile--wide img { object-position: 52% 52%; }
.gallery-tile:nth-child(2) img { object-position: 50% 52%; }
.gallery-tile:nth-child(3) img { object-position: center; }
.gallery-tile:nth-child(4) img { object-position: 52% 48%; }

.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(3, 12, 22, .82));
  transition: opacity .5s ease;
}

.gallery-tile span {
  position: absolute;
  z-index: 2;
  left: 1.35rem;
  right: 1.35rem;
  bottom: 1.2rem;
  color: #fff;
  font-family: var(--font-serif, serif);
  font-size: 1.15rem;
  transform: translateY(.35rem);
  transition: transform .5s ease, color .5s ease;
}

.gallery-tile:hover img { transform: scale(1.055); filter: saturate(1) brightness(.98); }
.gallery-tile:hover span { transform: translateY(0); color: #e2b36e; }

.gallery-dialog {
  width: min(92vw, 78rem);
  max-height: 92vh;
  border: 1px solid rgba(211,160,91,.35);
  border-radius: 1.5rem;
  padding: .75rem;
  background: #071220;
  color: white;
  box-shadow: 0 3rem 8rem rgba(0,0,0,.58);
}
.gallery-dialog::backdrop { background: rgba(1,7,13,.83); backdrop-filter: blur(12px); }
.gallery-dialog img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 1rem; display: block; }
.gallery-dialog p { margin: .8rem .5rem .35rem; color: rgba(255,255,255,.72); }
.gallery-dialog .dialog-close { z-index: 2; background: rgba(4,12,22,.78); color: white; }

.contact-city-bg__photo--office {
  background-image: url('../img/kanzlei/office-exterior-full.webp');
  animation: contactPhotoA 18s ease-in-out infinite alternate;
}
.contact-city-bg__photo--entrance {
  background-image: url('../img/kanzlei/office-entrance.webp');
  opacity: 0;
  animation: contactPhotoB 18s ease-in-out infinite alternate;
}
@keyframes contactPhotoA { 0%,43%{opacity:1;transform:scale(1.05)} 57%,100%{opacity:0;transform:scale(1.11)} }
@keyframes contactPhotoB { 0%,43%{opacity:0;transform:scale(1.12)} 57%,100%{opacity:1;transform:scale(1.055)} }

@media (max-width: 1050px) {
  .story__visual--owner { min-height: 37rem; }
  .owner-portrait { height: 36rem; }
  .office-gallery__grid { grid-template-columns: 1.2fr 1fr; grid-template-rows: 20rem 20rem 18rem; }
  .gallery-tile--wide { grid-row: 1 / 3; }
  .gallery-tile:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
}

@media (max-width: 720px) {
  .hero-visual--real .hero-visual__image { object-position: 58% center; }
  .story__visual--owner { min-height: auto; }
  .owner-portrait { height: 34rem; width: 100%; }
  .story__visual--owner .story__badge { right: .8rem; bottom: 1rem; }
  .office-gallery__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; padding-bottom: .8rem; }
  .gallery-tile, .gallery-tile--wide, .gallery-tile:nth-child(4) { flex: 0 0 82vw; height: 31rem; grid-column: auto; grid-row: auto; scroll-snap-align: center; }
  .gallery-tile:nth-child(3) { height: 24rem; }
  .gallery-tile:nth-child(4) { height: 31rem; }
  .gallery-intro { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual--real .hero-visual__image,
  .contact-city-bg__photo--office,
  .contact-city-bg__photo--entrance { animation: none !important; }
  .contact-city-bg__photo--entrance { display: none; }
}