/* Vollflächiger Beschnitt mit individuell gesetztem Motivfokus. */
.hero {
  background: var(--bg);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--hero-image, url("assets/hero-main.jpg")) center / cover no-repeat;
  filter: blur(20px);
  opacity: .32;
  transform: scale(1.04);
}

.hero > img {
  object-fit: cover;
  object-position: 58% 72%;
  z-index: 1;
}

.hero-shade { z-index: 2; }
.hero-copy { z-index: 3; }

.gallery-item {
  background: #c3c4ba;
}

.gallery-item img,
.about-image img {
  object-fit: cover;
  object-position: center;
}

.gallery-item:hover img {
  transform: scale(1.025);
}

/* Ein ruhiges Masonry-Raster bewahrt das echte Format jedes Motivs. */
.portfolio-gallery[hidden] {
  display: none !important;
}

.portfolio-gallery .gallery-grid {
  columns: 3;
  column-gap: 10px;
}

.portfolio-gallery .gallery-grid .gallery-item {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
}

.portfolio-gallery .gallery-item.landscape { aspect-ratio: 3 / 2; }
.portfolio-gallery .gallery-item.portrait { aspect-ratio: 2 / 3; }
.portfolio-gallery .gallery-item.square { aspect-ratio: 1; }
.portfolio-gallery .portfolio-entry:not(.landscape):not(.portrait):not(.square) { aspect-ratio: 3 / 2; }

.portfolio-gallery .gallery-extra { display: none; }
.portfolio-gallery.is-expanded .gallery-extra { display: block; }

.category-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 34px;
}

.category-selector button {
  min-height: 180px;
  padding: 24px;
  border: 1px solid rgba(48, 51, 47, .24);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .25s, color .25s, transform .25s;
}

.category-selector button:hover { transform: translateY(-3px); }
.category-selector button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.category-selector span { font-size: 10px; letter-spacing: .18em; }
.category-selector strong { font: 500 clamp(24px, 3vw, 45px)/1 Manrope, sans-serif; }
.category-selector small { font-size: 11px; letter-spacing: .08em; }

.load-more {
  display: flex;
  width: 100%;
  margin: 24px 0 0;
  padding: 18px 24px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  justify-content: space-between;
  cursor: pointer;
}

.load-more[hidden] { display: none !important; }

.legal-page { background: var(--paper); color: var(--ink); }
.legal-header { position: relative; background: var(--bg); color: var(--light); }
.legal-content { width: min(850px, calc(100% - 40px)); margin: 0 auto; padding: 100px 0 140px; }
.legal-content h1 { font: 500 clamp(55px, 9vw, 110px)/1 Manrope, sans-serif; letter-spacing: -.05em; }
.legal-copy { font-size: 17px; line-height: 1.75; }
.legal-copy h2 { margin-top: 50px; }
.legal-footer { grid-template-columns: 1fr auto auto; }
.portfolio-page-content { width: 100%; margin: 0; }
.portfolio-page-block .portfolio { padding-top: 100px; }
.editor-styles-wrapper .portfolio-block-view { width: 100%; padding: 70px 30px; }
.editor-styles-wrapper .portfolio-block-view .section-head h2 { font-size: clamp(60px, 8vw, 115px); }

/* Drei eigenständige Portfolio-Kategorien, gleichzeitig sichtbar. */
.portfolio-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.portfolio-category {
  min-width: 0;
}

.category-heading {
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(48, 51, 47, .22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.category-heading span,
.category-modal-head span {
  font-size: 10px;
  letter-spacing: .18em;
}

.category-heading h3,
.category-modal-head h3 {
  margin: 0;
  font: 500 clamp(25px, 3vw, 45px)/1 Manrope, sans-serif;
}

.category-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.category-preview .gallery-item {
  width: 100%;
  aspect-ratio: 3 / 2;
}

.category-preview .gallery-item img,
.category-modal-grid .gallery-item img {
  object-fit: cover;
  object-position: center;
}

.open-category-gallery {
  width: 100%;
  margin-top: 12px;
  padding: 17px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.category-modal {
  width: min(1240px, 94vw);
  height: min(88vh, 900px);
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.category-modal::backdrop {
  background: rgba(22, 25, 22, .82);
  backdrop-filter: blur(5px);
}

.category-modal-head {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 105px;
  padding: 22px 28px;
  background: var(--paper);
  border-bottom: 1px solid rgba(48, 51, 47, .2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-modal-head > div {
  display: flex;
  gap: 30px;
  align-items: baseline;
}

.close-category-gallery {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 28px;
  cursor: pointer;
}

.category-modal-grid {
  height: calc(100% - 105px);
  padding: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
}

.category-modal-grid .gallery-item {
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0 0 16px !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  transform: translateZ(0);
}

.category-modal-grid .gallery-item img {
  height: 100%;
  border-radius: 1px;
  transition: transform .45s ease;
  will-change: transform;
}

.category-modal-grid .gallery-item:hover img {
  transform: scale(1.018);
}

/* Der Fokus folgt dem jeweiligen Fahrzeug bzw. Gesicht. */
.gallery[data-gallery="auto"] .gallery-item:nth-child(1) img { object-position: 50% 58%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(2) img { object-position: 50% 58%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(3) img { object-position: 50% 50%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(4) img { object-position: 52% 55%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(5) img { object-position: 50% 52%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(6) img { object-position: 52% 50%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(7) img { object-position: 50% 42%; }
.gallery[data-gallery="auto"] .gallery-item:nth-child(8) img { object-position: 50% 52%; }
.wedding-gallery .gallery-item img { object-position: 50% 35%; }
.about-image img { object-position: 50% 35%; }

/* In der Vergrößerung bleibt weiterhin das komplette Bild sichtbar. */
.lightbox img {
  object-fit: contain;
}

.about-image {
  background: #21241f;
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-message {
  padding: 14px 16px;
  margin: 0 0 28px;
  border: 1px solid rgba(37, 41, 35, .35);
  font-size: 14px;
}

.form-message.success { background: rgba(255, 255, 255, .22); }
.form-message.error { background: rgba(112, 48, 42, .12); }

@media (max-width: 800px) {
  .hero > img { object-position: 61% 70%; }
  .portfolio-gallery .gallery-grid {
    columns: 1;
  }
  .category-selector { grid-template-columns: 1fr; }
  .category-selector button { min-height: 130px; }
  .portfolio-columns { grid-template-columns: 1fr; gap: 42px; }
  .category-preview { grid-template-columns: repeat(2, 1fr); }
  .category-modal-grid { grid-template-columns: 1fr; }
  .category-modal-head { padding: 18px; }
  .category-modal-head > div { gap: 12px; flex-direction: column; }
}