/* ============================================================
   Manuel Mader-Nachtrodt · Fotografie
   Palette: Galerie-Weiß / Tinte / Messing (Orgelpfeifen)
   Type:    Marcellus (Display) · Mulish (Text)
   ============================================================ */

:root{
  --paper:   #F7F5F2;
  --paper-2: #EFECE6;
  --ink:     #22211F;
  --ink-soft:#54514B;
  --brass:   #9C7A45;
  --brass-2: #B6935C;
  --line:    #DDD8CF;
  --display: 'Marcellus', serif;
  --body:    'Mulish', system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem clamp(1.2rem, 4vw, 3rem);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:var(--display);
  font-size:1.15rem; letter-spacing:.18em;
  text-decoration:none; color:var(--ink);
  white-space:nowrap;
}
@media (max-width:760px){
  .site-header{
    position:static;
    flex-direction:column; gap:.8rem;
    padding:.9rem 1rem;
  }
  .site-nav{ flex-wrap:wrap; justify-content:center; row-gap:.55rem; column-gap:1rem; }
  .site-nav a{ font-size:.78rem; }
  .nav-cta{ padding:.4rem .8rem; }
}
.site-nav{ display:flex; gap:clamp(.9rem,2.5vw,1.8rem); align-items:center; }
.site-nav a{
  text-decoration:none; font-size:.82rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  transition:color .2s;
}
.site-nav a:hover{ color:var(--brass); }
.nav-cta{
  border:1px solid var(--brass); padding:.45rem 1rem;
  color:var(--brass) !important;
}
.nav-cta:hover{ background:var(--brass); color:var(--paper) !important; }
.nav-cta-fill{ background:var(--brass); color:var(--paper) !important; }
.nav-cta-fill:hover{ background:var(--brass-2); border-color:var(--brass-2); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(92vh, 60rem);
  display:flex; align-items:center;
  padding:4rem clamp(1.2rem,6vw,5rem);
  overflow:hidden;
  color:#fff;
}
.hero-media, .hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(16,15,14,.68) 0%,
      rgba(16,15,14,.42) 45%,
      rgba(16,15,14,.12) 75%,
      rgba(16,15,14,0) 100%),
    linear-gradient(to top, rgba(16,15,14,.35), transparent 35%);
}
.hero-inner{ position:relative; max-width:44rem; }
.eyebrow{
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin-bottom:1.2rem;
}
.hero .eyebrow{ color:var(--brass-2); }
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.06; font-weight:400;
  margin-bottom:1.6rem;
  text-wrap:balance;
}
.hero h1 em{ font-style:italic; color:var(--brass-2); }
.hero-sub{
  max-width:34rem; font-size:1.05rem; margin-bottom:2.2rem;
  color:rgba(255,255,255,.88);
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-tag{
  display:flex; align-items:center; gap:.8rem;
  margin-top:2.6rem;
  font-family:var(--display);
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.hero-tag .aperture{ color:var(--brass-2); flex:none; }
.hero .btn{ background:#fff; color:var(--ink); }
.hero .btn:hover{ background:var(--brass); color:#fff; }
.hero .btn-quiet{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.4); }
.hero .btn-quiet:hover{ color:#fff; border-color:#fff; }
.hero-name{
  position:absolute; right:-1.2rem; bottom:2.5rem;
  writing-mode:vertical-rl;
  font-family:var(--display);
  font-size:.95rem; letter-spacing:.34em;
  color:rgba(255,255,255,.65);
}
@media (max-width:700px){ .hero-name{ display:none; } .hero{ min-height:72vh; } }

.btn{
  display:inline-block; text-decoration:none;
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.7rem; font-size:.85rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s;
}
.btn:hover{ background:var(--brass); }
.btn-quiet{
  display:inline-block; text-decoration:none;
  padding:.85rem .4rem; font-size:.85rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  transition:color .2s, border-color .2s;
}
.btn-quiet:hover{ color:var(--brass); border-color:var(--brass); }

/* ---------- Sections ---------- */
.section{ padding:clamp(4rem,9vw,7rem) clamp(1.2rem,6vw,5rem); }
.section-tinted{ background:var(--paper-2); }
.section-head{ max-width:44rem; margin-bottom:3rem; }
.section-head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.15;
  margin-bottom:.8rem;
}
.section-note{ color:var(--ink-soft); font-size:.98rem; }

/* ---------- Leistungen ---------- */
.services{
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(16rem,1fr));
}
.service{
  border-top:1px solid var(--brass);
  padding-top:1.4rem;
}
.service h3{
  font-family:var(--display); font-weight:400;
  font-size:1.4rem; margin-bottom:.7rem;
}
.service p{ color:var(--ink-soft); font-size:.98rem; }

/* ---------- Portfolio-Galerie ---------- */
.gallery{
  columns:3;
  column-gap:2rem;
}
@media (max-width:980px){ .gallery{ columns:2; } }
@media (max-width:560px){ .gallery{ columns:1; } }
.shot{
  position:relative;
  break-inside:avoid;
  margin-bottom:2rem;
  overflow:hidden;
  background:var(--paper-2);
}
.shot img{
  display:block; width:100%; height:auto;
  transition:transform .6s ease;
}
.shot:hover img{ transform:scale(1.03); }
.shot-pano{ margin:0; }
.shot figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:2.2rem 1.1rem .9rem;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(to top, rgba(16,15,14,.55), transparent);
  pointer-events:none;
}

/* ---------- Über mich ---------- */
.about{
  display:grid; gap:3rem;
  grid-template-columns:minmax(14rem, 22rem) 1fr;
  align-items:start;
}
@media (max-width:800px){ .about{ grid-template-columns:1fr; } }
.about-portrait{ overflow:hidden; }
.about-portrait img{ display:block; width:100%; height:100%; object-fit:cover; object-position:0% 30%; aspect-ratio:3/4; }
.about-text h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:1.2rem;
}
.about-text p{ color:var(--ink-soft); margin-bottom:1.1rem; max-width:36rem; }
.signature{
  font-family:var(--display); font-size:1.5rem; color:var(--brass);
  margin-top:1.6rem;
}

/* ---------- Kontakt ---------- */
.section-dark{
  background:var(--ink); color:var(--paper);
}
.section-dark h2{ color:var(--paper); }
.section-dark .section-note{ color:color-mix(in srgb, var(--paper) 70%, transparent); }
.eyebrow-light{ color:var(--brass-2); }
.contact-card{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.btn-light{
  background:var(--brass); color:var(--paper);
  text-transform:none; letter-spacing:.03em; font-size:.95rem;
}
.btn-light:hover{ background:var(--brass-2); }
.contact-note{ font-size:.9rem; color:color-mix(in srgb, var(--paper) 60%, transparent); }

/* ---------- Footer ---------- */
.site-footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding:1.6rem clamp(1.2rem,4vw,3rem);
  border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-soft);
}
.site-footer nav{ display:flex; gap:1.4rem; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; }
.site-footer a:hover{ color:var(--brass); }