/* ==========================================================================
   menschen.photos – Design in Anlehnung an das Koken-"Repertoire"-Original
   Akzent #fa3c24, Text #222, viel Weißraum, gesperrte Großbuchstaben-Labels
   ========================================================================== */
:root{
  --accent:#fa3c24;
  --ink:#222;
  --muted:#666;
  --faint:#999;
  --line:#ececec;
}

body{
  color:var(--ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-weight:300;letter-spacing:.02em;color:var(--ink);line-height:1.18}

/* ---------- Navbar + Masthead ---------- */
.navbar{border-bottom:1px solid var(--line);background:#fff;padding:.5rem 0}
.mf-brand{display:flex;flex-direction:column;line-height:1.05}
.mf-brand-name{font-size:1.1rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.mf-brand-sub{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.navbar-section a,.navbar a.nav-link{
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--ink)!important;
}
.navbar-section a:hover,.navbar a.active{color:var(--accent)!important}

/* ---------- Grundlayout ---------- */
section#body{padding-top:2.4rem;padding-bottom:3.5rem}
.container.grid-lg,#body>.container{max-width:1180px}

/* ---------- Startseite: Masthead ---------- */
.mf-masthead{max-width:64ch;margin:0 auto 2.8rem;text-align:center}
.mf-masthead h1{font-size:2.1rem;letter-spacing:.06em;text-transform:uppercase;margin:.2rem 0 .6rem}
.mf-masthead p{color:var(--muted);line-height:1.75;margin:0}
.mf-section-title{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
  border-top:1px solid var(--line);padding-top:1.6rem;margin:3.2rem 0 1.6rem;text-align:center}

/* ---------- Startseite: Galerien ---------- */
.mf-galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px 22px}
.mf-galcard{margin:0}
.mf-galcard-img{display:block;overflow:hidden;background:#f3f3f3}
.mf-galcard-img img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform .55s ease,opacity .3s}
.mf-galcard-img:hover img{transform:scale(1.04);opacity:.94}
.mf-galcard-title{font-size:1.15rem;margin:.7rem 0 .25rem}
.mf-galcard-title a{color:var(--ink)}
.mf-galcard-title a:hover{color:var(--accent)}
.mf-galcard-text{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}

/* ---------- Startseite: Essay-Teaser ---------- */
.mf-essaygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;max-width:1000px;margin:0 auto}
.mf-essay-teaser h3{font-size:1.15rem;margin:0 0 .4rem}
.mf-essay-teaser h3 a{color:var(--ink)}
.mf-essay-teaser h3 a:hover{color:var(--accent)}
.mf-essay-teaser p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0 0 .5rem}

/* ---------- Footer ---------- */
#footer,.footer{border-top:1px solid var(--line);color:var(--faint);font-size:.76rem;letter-spacing:.05em}
#footer a,.footer a{color:var(--muted)}

/* ---------- Akzentangleich eigener Klassen ---------- */
.mp-more,.mp-back{color:var(--accent)}
.mp-title,.mpt h1,.mpe h1{letter-spacing:.04em}