/* ============================================================================
   Berufsfotografie Burgenland — Website redesign styles
   Built on the Menschen im Fokus tokens (colors_and_type.css).
   Responsiveness is CONTAINER-driven (@container), so the same markup adapts
   inside a 1440px or a 390px artboard as well as a real browser viewport.
   ========================================================================== */

.site {
  container-type: inline-size;
  background: var(--mif-bg);
  color: var(--mif-fg-body);
  font-family: var(--mif-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img { display: block; max-width: 100%; }
.site a { color: inherit; text-decoration: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 56px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 14px 28px; border-radius: 0; cursor: pointer; white-space: nowrap;
  transition: all .25s cubic-bezier(.22,.61,.36,1); border: 1px solid transparent;
}
.btn.btn--solid { background: #fff; color: var(--mif-ink); border-color: #fff; }
.btn.btn--solid:hover { opacity: .86; }
.btn.btn--ghost { background: transparent; color: #fff; border-color: var(--mif-line-strong); }
.btn.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ---- Kicker / labels ---------------------------------------------------- */
.kicker {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--mif-fg-muted);
}

/* ============================ NAV ======================================== */
.nav { position: relative; z-index: 30; }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; border-bottom: 1px solid var(--mif-line);
}
.nav__logo { display: flex; align-items: center; gap: 14px; }
.nav__logo img { height: 46px; }
.nav__logo .wm {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.25; color: #fff;
}
.nav__links { display: flex; align-items: center; gap: 38px; }
.nav__link {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.62); padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: all .2s; cursor: pointer;
}
.nav__link:hover, .nav__link.is-active { color: #fff; border-bottom-color: #fff; }
.nav__burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--mif-line-strong);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; padding: 0;
}
.nav__burger span { display: block; width: 20px; height: 2px; background: #fff; transition: .25s; }
.nav__mobile {
  display: none; flex-direction: column; gap: 0;
  border-bottom: 1px solid var(--mif-line);
}
.nav__mobile a {
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.8); padding: 20px 0; border-top: 1px solid var(--mif-line);
}
.nav__mobile a:first-child { border-top: 0; }

/* ============================ HERO ======================================= */
.hero { position: relative; }

/* A — full-bleed editorial overlay */
.hero--a { min-height: 660px; display: flex; align-items: flex-end; }
.hero--a .hero__media { position: absolute; inset: 0; }
.hero--a image-slot, .hero--a .ph { width: 100%; height: 100%; }
.hero--a .hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33,29,33,.45) 0%, rgba(33,29,33,.15) 38%, rgba(33,29,33,.92) 100%);
}
.hero--a .hero__body { position: relative; padding: 0 0 72px; max-width: 760px; }
.hero--a .hero__badge { position: absolute; top: 44px; right: 0; }

/* B — split: type | image */
.hero--b { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 640px; }
.hero--b .hero__col {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px clamp(28px, 5.5cqw, 96px); }
.hero--b .hero__media { position: relative; }
.hero--b image-slot, .hero--b .ph { position: absolute; inset: 0; width: 100%; height: 100%; }

/* C — type-first */
.hero--c { padding: 92px 0 80px; }
.hero--c .hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; }
.hero--c .hero__frame { aspect-ratio: 4/5; background: #000; max-width: 300px; }
.hero--c image-slot, .hero--c .ph { width: 100%; height: 100%; }

.hero__kicker { margin-bottom: 22px; }
.hero__title {
  font-weight: 400; text-transform: uppercase; letter-spacing: -.01em;
  line-height: 1.02; color: #fff; margin: 0;
}
.hero--a .hero__title, .hero--b .hero__title { font-size: clamp(40px, 6.2cqw, 78px); }
.hero--c .hero__title { font-size: clamp(48px, 9cqw, 132px); }
.hero__title strong { font-weight: 700; }
.hero__sub {
  margin: 26px 0 34px; font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,.78); max-width: 30em; text-wrap: pretty;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.aperture-row { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.aperture-row img { height: 56px; }

/* placeholder fallback look when no image-slot */
.ph { background: #000; }

/* ========================= SECTION: MIF ================================== */
.section { padding: 96px 0; }
.section--line { border-top: 1px solid var(--mif-line); }
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.section__title {
  font-size: clamp(30px, 4.4cqw, 48px); font-weight: 400; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.06; color: #fff; margin: 18px 0 0;
}
.section__title strong { font-weight: 700; }
.lead { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 24px 0 0; text-wrap: pretty; }
.mif-copy p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,.78); margin: 0 0 18px; text-wrap: pretty; }
.mif-copy .mif-invite { color: #fff; }
.mif-copy .btn { margin-top: 14px; }
.tourlist { margin-top: 40px; border-top: 1px solid var(--mif-line); }
.tourrow {
  display: flex; align-items: baseline; gap: 18px; padding: 18px 0;
  border-bottom: 1px solid var(--mif-line);
  text-transform: uppercase; line-height: 1.1;
  font-size: clamp(20px, 2.4cqw, 28px); color: #fff;
}
.tourrow .place { font-weight: 700; }
.tourrow .date { font-weight: 400; color: rgba(255,255,255,.7); }
.tourrow .city { margin-left: auto; font-size: 12px; letter-spacing: .16em; color: var(--mif-fg-faint); font-weight: 700; }
.feature__media { aspect-ratio: 3/4; background: #000; }
.feature__media image-slot, .feature__media .ph { width: 100%; height: 100%; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* facts strip */
.facts { display: flex; gap: 56px; margin-top: 44px; flex-wrap: wrap; }
.fact .n { font-size: 52px; font-weight: 700; color: #fff; line-height: 1; }
.fact .l { margin-top: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--mif-fg-muted); }

/* ========================= FOOTER / IMPRESSUM ============================ */
.foot { border-top: 1px solid var(--mif-line); padding: 72px 0 40px; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.foot h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--mif-fg-muted); margin: 0 0 18px; }
.foot p, .foot a { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.74); }
.foot a:hover { color: #fff; }
.foot__brand img { height: 64px; margin-bottom: 22px; }
.social { display: flex; gap: 14px; margin-top: 6px; }
.social a {
  width: 42px; height: 42px; border: 1px solid var(--mif-line-strong);
  display: flex; align-items: center; justify-content: center; transition: .2s;
}
.social a:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.social svg { width: 18px; height: 18px; }
.foot__bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--mif-line);
  font-size: 13px; color: var(--mif-fg-faint);
}

/* ============================ MOBILE (container) ========================= */
@container (max-width: 720px) {
  .wrap { padding: 0 24px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2){ opacity: 0; }
  .nav__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .nav__mobile.is-open { display: flex; }

  .hero--b { grid-template-columns: 1fr; }
  .hero--b .hero__media { min-height: 380px; }
  .hero--b .hero__col { padding: 56px 0; }
  .hero--c .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero--c .hero__grid > div:last-child { order: -1; }
  .hero--c .hero__frame { max-width: 220px; margin-left: auto; }
  .hero--c .hero__cap { text-align: right; }
  .hero--a { min-height: 560px; }

  .section { padding: 64px 0; }
  .feature__grid { grid-template-columns: 1fr; gap: 40px; }
  .foot__top { grid-template-columns: 1fr; gap: 36px; }
  .facts { gap: 36px; }
  .fact .n { font-size: 40px; }
}

/* ====================== EXHIBITION PAGE ================================== */
.exh-badge { width: 184px; height: 184px; display: block; margin: 0 0 40px -10px; }

/* FOTOGRAF:INNEN — big title + selectable names */
.fotografen__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.fotografen__title {
  font-size: clamp(46px, 7cqw, 104px); font-weight: 400; text-transform: uppercase;
  color: #fff; line-height: 1.0; letter-spacing: -.01em; margin: 0;
}
.fotografen__names {
  font-size: clamp(15px, 1.45cqw, 18px); line-height: 1.7; text-transform: uppercase;
  letter-spacing: .015em; color: rgba(255,255,255,.66);
}
.fname { cursor: pointer; transition: color .15s; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.fname:hover { color: #fff; }
.fname.sel { color: #fff; border-bottom-color: #fff; }
.fsep { color: rgba(255,255,255,.28); padding: 0 2px; }

/* Catalog spread — recreated. Black pages and white pages; photos in colour. */
.spread { display: grid; grid-template-columns: 1fr 1fr; position: relative; align-items: stretch; scroll-margin-top: 84px; }
.spread + .spread { margin-top: 28px; }
.spread--dark { background: #000; }
.spread--light { background: #fff; }
.spread__left { position: relative; padding: 48px; display: flex; flex-direction: column; min-height: 360px; }
.spread__portrait { width: 148px; height: 148px; object-fit: cover; background: #141414; flex: none; }
.spread__name { margin-top: auto; font-size: clamp(26px, 3.2cqw, 44px); font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
.spread__loc { position: absolute; top: 48px; right: 14px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.spread__web { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-decoration: none; }
.spread__web:hover { text-decoration: underline; text-underline-offset: 3px; }
.spread--dark .spread__name, .spread--dark .spread__loc { color: #fff; }
.spread--dark .spread__web { color: rgba(255,255,255,.5); }
.spread--light .spread__name, .spread--light .spread__loc { color: var(--mif-ink); }
.spread--light .spread__web { color: rgba(33,29,33,.5); }
.spread__photo { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.spread__photo img { width: 100%; height: auto; display: block; }
.spread--dark .spread__photo { background: #000; }
.spread--light .spread__photo { background: #fff; }

/* Hero photo caption (Erwin Muik / Innungsmeister) — folder style, inline */
.hero__cap { margin-top: 18px; text-transform: uppercase; font-size: 20px; line-height: 1.2; letter-spacing: -.005em; color: #fff; }
.hero__cap-name { font-weight: 700; }
.hero__cap-role { font-weight: 400; color: rgba(255,255,255,.86); }

/* Tour dates — folder style: bold place + regular date, all-caps, flowing */
.tourfolder {
  margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--mif-line);
  text-transform: uppercase; color: #fff; line-height: 1.32; letter-spacing: -.005em;
  font-size: clamp(22px, 2.7cqw, 36px);
}
.tourfolder .v { margin-right: .55em; }
.tourfolder .place { font-weight: 700; }
.tourfolder .date { font-weight: 400; color: rgba(255,255,255,.86); }

/* Innung group photo (B&W) */
.innung-photo { margin-top: 44px; width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: grayscale(1); display: block; }

/* ====================== LEGAL / DATENSCHUTZ ============================= */
.legal { max-width: 800px; }
.legal__lead { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 18px 0 0; }
.legal h2 { font-size: clamp(22px, 2.8cqw, 32px); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: #fff; line-height: 1.12; margin: 60px 0 10px; }
.legal h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 34px 0 6px; }
.legal h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 18px 0 2px; }
.legal p { font-size: 15px; line-height: 1.66; color: rgba(255,255,255,.74); margin: 0 0 14px; text-wrap: pretty; }
.legal ul { margin: 0 0 14px; padding-left: 20px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.62; }
.legal li { margin-bottom: 8px; }
.legal a { color: #fff; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal strong { color: #fff; font-weight: 700; }
.legal .upper { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.55); }

/* Back-to-top floating button */
.scrollup {
  position: fixed; right: 28px; bottom: 28px; z-index: 60;
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  background: var(--mif-bg); border: 1px solid var(--mif-line-strong); color: #fff;
  cursor: pointer; padding: 0; border-radius: 0;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), border-color .2s, background .2s;
}
.scrollup.is-on { opacity: 1; transform: none; pointer-events: auto; }
.scrollup:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.scrollup:active { transform: translateY(1px); }
.scrollup svg { width: 20px; height: 20px; display: block; }
@media (max-width: 640px) { .scrollup { right: 16px; bottom: 16px; width: 46px; height: 46px; } }

@container (max-width: 720px) {
  .fotografen__grid { grid-template-columns: 1fr; gap: 28px; }
  .spread { grid-template-columns: 1fr; }
  .spread__left { min-height: 0; padding: 32px; }
  .spread__name { margin-top: 28px; }
  .spread__photo img { width: 100%; height: auto; }
  .spread__loc { display: none; }
}