/* ============================================================
   Andreas Mann | Fotografie – Premium Redesign
   Dunkel · editorial · Serif-Headlines · Kupfer-Akzent
   ============================================================ */

:root {
  /* Warme, dunkle Galerie-Palette */
  --bg:        #100e0c;
  --bg-2:      #15120f;
  --surface:   #1b1714;
  --ink:       #ece6da;   /* warmes Off-White */
  --ink-soft:  #c7bfb2;
  --muted:     #8d8576;
  --faint:     #5d564c;
  --line:      rgba(236, 230, 218, 0.12);
  --line-2:    rgba(236, 230, 218, 0.07);
  --copper:    #c79466;
  --copper-2:  #dcab7d;
  --copper-deep:#9c6e44;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 84px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--copper); color: #1a140e; }

/* ---------- Typografie-Bausteine ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
}
.eyebrow .num { color: var(--faint); margin-right: 0.9em; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; }

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 8.5vw, 7.4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.display em { font-style: italic; color: var(--copper-2); }

.h-section {
  font-size: clamp(2rem, 5vw, 3.9rem);
  line-height: 1.0;
  font-weight: 300;
}
.lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  line-height: 1.34;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.prose p { color: var(--ink-soft); margin-bottom: 1.1em; max-width: 62ch; }
.prose a { color: var(--copper-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(220,171,125,.4); }
.prose a:hover { text-decoration-color: var(--copper-2); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.rule { height: 1px; background: var(--line); border: 0; width: 100%; }

section { position: relative; }

/* ---------- Header / Nav ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled {
  background: rgba(16,14,12,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line-2);
  padding-top: 13px; padding-bottom: 13px;
}
.brand { display: flex; align-items: baseline; gap: 12px; line-height: 1; flex-shrink: 0; }
.brand .b-name { font-family: var(--serif); font-size: 23px; letter-spacing: -0.01em; white-space: nowrap; }
.brand .b-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; font-size: 13.5px; letter-spacing: 0.01em; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px; color: var(--ink-soft);
  transition: color .3s, background .3s;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--copper-2); }

/* Dropdown Portfolio */
.nav .has-sub { position: relative; }
.nav .sub {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 256px; background: rgba(22,19,16,0.96); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  opacity: 0; visibility: hidden; transition: all .32s var(--ease);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
}
.nav .has-sub:hover .sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav .sub a {
  display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 9px; font-size: 14px;
}
.nav .sub a .si { font-family: var(--mono); font-size: 10px; color: var(--faint); width: 22px; }
.nav .sub a:hover { background: rgba(199,148,102,.10); color: var(--ink); }
.nav .cta {
  margin-left: 10px; border: 1px solid var(--line); color: var(--ink);
}
.nav .cta:hover { background: var(--copper); color: #1a140e; border-color: var(--copper); }

.nav-toggle { display: none; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: clamp(80px, 12vh, 160px); padding: clamp(56px,8vh,96px) 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1.1fr 0.9fr 0.9fr; gap: 48px; }
.foot-grid > div:first-child { grid-column: 1; }
.foot-grid h4 { font-family: var(--mono); font-size: 11px; font-weight:400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.foot-grid .big { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,4vw,3rem); line-height: 1.0; margin-bottom: 18px; }
.foot-contact div { display: flex; gap: 16px; align-items: baseline; margin-bottom: 9px; }
.foot-contact .fl { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); width: 62px; flex-shrink: 0; }
.foot-contact .fv { color: var(--ink-soft); flex: 1; min-width: 0; line-height: 1.45; }
.foot-contact .fv a { color: var(--copper-2); word-break: break-word; }
.foot-links { display:flex; flex-direction: column; gap: 11px; }
.foot-links a { color: var(--ink-soft); font-size: 14.5px; width: fit-content; transition: color .25s; }
.foot-links a:hover { color: var(--copper-2); }
.foot-bottom { display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap:16px; margin-top: clamp(48px,7vh,80px); padding-top: 26px; border-top: 1px solid var(--line-2); }
.foot-bottom .copy { font-size: 12.5px; color: var(--muted); }
.foot-social { display:flex; gap: 22px; }
.foot-social a { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .25s;}
.foot-social a:hover { color: var(--copper-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 26px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
  transition: all .35s var(--ease); cursor: pointer; background: transparent;
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover { background: var(--copper); border-color: var(--copper); color: #1a140e; }
.btn:hover .arr { transform: translateX(5px); }
.btn.solid { background: var(--copper); border-color: var(--copper); color: #1a140e; }
.btn.solid:hover { background: var(--copper-2); border-color: var(--copper-2); }

/* ---------- Reveal-Animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1 !important; transform:none !important; } html { scroll-behavior:auto; } }

/* Frozen-Timeline-Fallback: Animationen aus → Inhalt sofort sichtbar */
html.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-anim .scroll-hint .bar { animation: none !important; transform: scaleX(1) !important; }
html.no-anim * { transition-duration: 0.001s !important; }

/* ---------- Hover-Zoom-Bild ---------- */
.ph { position: relative; overflow: hidden; background: var(--surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
.ph:hover img { transform: scale(1.045); }
.ph::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px var(--line-2); pointer-events:none; }

/* ---------- Galerie-Grid + Lightbox ---------- */
.gal-section { margin-top: clamp(56px, 8vh, 96px); }
.gal-head { display:flex; align-items: baseline; gap: 20px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.gal-head h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; }
.gal-head .count { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .12em; margin-left: auto; }

.gal-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.gal-grid figure { grid-column: span 4; }
.gal-grid figure.wide { grid-column: span 6; }
.gal-grid figure.tall { grid-column: span 4; }
.gal-item { cursor: zoom-in; aspect-ratio: 3/2; display:block; width:100%; }
.gal-grid figure.tall .gal-item { aspect-ratio: 3/4; }
.gal-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 9px; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10,9,8,0.97); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease); }
.lb.open { opacity: 1; visibility: visible; }
.lb img { max-width: 90vw; max-height: 84vh; object-fit: contain; box-shadow: 0 40px 120px -30px #000; transform: scale(.97); transition: transform .45s var(--ease); }
.lb.open img { transform: scale(1); }
.lb-cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.lb-x, .lb-prev, .lb-next { position: absolute; background: none; border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  border-radius: 999px; transition: all .3s; display:flex; align-items:center; justify-content:center; }
.lb-x { top: 24px; right: 24px; width: 48px; height: 48px; font-size: 18px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 20px; }
.lb-prev { left: 24px; } .lb-next { right: 24px; }
.lb-x:hover, .lb-prev:hover, .lb-next:hover { background: var(--copper); color: #1a140e; border-color: var(--copper); }
.lb-count { position:absolute; top: 30px; left: 28px; font-family: var(--mono); font-size: 12px; letter-spacing:.12em; color: var(--muted); }

/* ---------- Page hero (Unterseiten) ---------- */
.page-hero { padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(40px, 6vh, 72px); }
.page-hero .display { max-width: 14ch; }
.page-hero .lead { margin-top: 30px; max-width: 56ch; }
.crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 30px; display:flex; gap:10px; align-items:center;}
.crumbs a:hover { color: var(--copper-2); }
.crumbs .sep { color: var(--faint); }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 36px; } .mt-l { margin-top: 64px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Legal / Textseiten ---------- */
.legal { max-width: 760px; padding-bottom: clamp(50px,8vh,100px); }
.legal h2 { font-family:var(--serif); font-weight:400; font-size: clamp(1.5rem,2.6vw,2.1rem); margin: clamp(34px,5vh,54px) 0 14px; }
.legal h3 { font-family:var(--sans); font-weight:600; font-size: 1rem; margin: 24px 0 8px; color:var(--ink); }
.legal p, .legal li { color: var(--ink-soft); font-size: 16px; margin-bottom: 13px; line-height: 1.72; }
.legal a { color: var(--copper-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(220,171,125,.4); word-break: break-word; }
.legal a:hover { text-decoration-color: var(--copper-2); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { list-style: none; margin: 0 0 14px; }
.legal .addr { font-family: var(--serif); font-size: 1.45rem; line-height: 1.45; color: var(--ink); margin: 6px 0 22px; }
.legal .src { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 40px; }

/* ---------- Links-Seite ---------- */
.link-group { padding: clamp(34px,5vh,52px) 0; border-bottom: 1px solid var(--line-2); display:grid; grid-template-columns: 0.5fr 1.5fr; gap: clamp(20px,4vw,64px); }
.link-group:first-child { border-top: 1px solid var(--line); }
.link-group h2 { font-family:var(--serif); font-weight:300; font-size: clamp(1.6rem,3vw,2.3rem); }
.link-row { display:block; padding: 16px 0; border-top: 1px solid var(--line-2); transition: padding-left .3s var(--ease); }
.link-row:first-child { border-top: 0; }
.link-group .links-col .link-row:first-child { border-top: 0; }
.link-row:hover { padding-left: 10px; }
.link-row .lt { font-size: 15.5px; color: var(--ink-soft); }
.link-row .lu { font-family: var(--mono); font-size: 12px; letter-spacing:.04em; color: var(--copper); margin-top: 5px; display:inline-flex; gap:8px; align-items:center; }
.link-row:hover .lu { color: var(--copper-2); }
.link-row.no-url .lu { color: var(--muted); }
@media (max-width: 760px){ .link-group { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Mobile-Menü (immer off-canvas, nur per Toggle sichtbar) ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg-2);
  transform: translateY(-100%); transition: transform .5s var(--ease);
  display: flex; flex-direction: column; padding: 100px var(--gutter) 40px; gap: 4px; overflow-y: auto;
  visibility: hidden;
}
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu a { font-family: var(--serif); font-size: 1.9rem; font-weight: 300; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mobile-menu a.sub-link { font-family: var(--sans); font-size: 1.05rem; color: var(--ink-soft); padding-left: 18px; }
.mobile-menu a.sub-link .si { font-family: var(--mono); font-size: 10px; color: var(--copper); margin-right: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .nav .desktop-only { display: none; }
  .nav-toggle {
    display: flex; align-items:center; justify-content:center; width:46px; height:46px;
    background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
  }
}
@media (max-width: 980px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .gal-grid figure, .gal-grid figure.wide, .gal-grid figure.tall { grid-column: span 6; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .gal-grid figure, .gal-grid figure.wide, .gal-grid figure.tall { grid-column: span 12; }
  body { font-size: 16px; }
}