/* michaeltettenborn — Nachbau des Squarespace-Layouts „Wexley“ (Stand 2025)
   Schriften lokal: Josefin Sans (Logo, Ersatz für Brandon Grotesque), Nunito Sans (Text, Ersatz für Europa) — beide SIL Open Font License */

@font-face { font-family: "Logo"; src: url("/fonts/josefin-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Text"; src: url("/fonts/nunito-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Text"; src: url("/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Text"; src: url("/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #ffffff;
  --logo: #111111;
  --text: #666666;
  --muted: #aaaaaa;
  --nav: #9c9c9c;
  --nav-active: #000000;
  --pad: 60px;
  --gap: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--nav-active); }

.page { padding: var(--pad); min-height: 100vh; display: flex; flex-direction: column; }

/* Kopf: Logo links, Navigation rechts daneben */
.header { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 50px; }
.logo { margin: 0; font-family: "Logo", "Futura", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; letter-spacing: 0.055em; color: var(--logo); }
.logo a:hover { color: var(--logo); }
.tagline { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0.04em; line-height: 2; margin-top: 2px; }
.nav { display: flex; gap: 22px; padding-top: 8px; }
.nav a { color: var(--nav); }
.nav a[aria-current="page"], .nav a:hover { color: var(--nav-active); }

main { flex: 1; }

/* Galerie: Zeilen mit gleicher Höhe, Bildbreite nach Seitenverhältnis */
.gallery { display: flex; flex-wrap: wrap; gap: var(--gap); }
.gallery a { display: block; flex-grow: var(--r); flex-basis: calc(var(--r) * 520px); position: relative; overflow: hidden; background: #f4f4f4; }
.gallery a::before { content: ""; display: block; padding-top: calc(100% / var(--r)); }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.gallery a:hover img { opacity: .9; }
.gallery::after { content: ""; flex-grow: 999; }

/* Textseiten */
.text-page { max-width: 820px; margin: 40px auto 0; text-align: center; }
.text-page h2 { font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: #333; margin: 0 0 36px; line-height: 1.8; }
.text-page .small { margin-bottom: 10px; }
.contact { max-width: 820px; margin: 40px auto 0; padding-left: 37%; }
.legal { max-width: 720px; margin: 20px auto 0; }
.legal h2 { font-weight: 600; font-size: 15px; color: #333; margin: 0 0 16px; }
.legal h3 { font-weight: 600; font-size: 13px; color: #333; margin: 28px 0 6px; }
.legal p { margin: 0 0 10px; }

/* Fuß */
.footer { margin-top: 60px; font-size: 12px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.footer a:hover { color: var(--nav-active); }

/* Bild groß ansehen */
.lightbox { position: fixed; inset: 0; background: rgba(255,255,255,.97); display: none; align-items: center; justify-content: center; z-index: 10; }
.lightbox.open { display: flex; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 100px); object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; font: inherit; font-size: 13px; color: var(--nav); cursor: pointer; padding: 14px; letter-spacing: .06em; }
.lightbox button:hover { color: #000; }
.lb-close { top: 16px; right: 20px; font-size: 22px !important; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  :root { --pad: 20px; }
  .header { gap: 14px; margin-bottom: 30px; }
  .logo { font-size: 26px; }
  .nav { padding-top: 0; width: 100%; }
  .gallery a { flex-basis: 100%; }
  .contact { padding-left: 0; text-align: center; }
  .lightbox img { max-width: calc(100vw - 20px); }
  .lb-prev, .lb-next { top: auto; bottom: 10px; transform: none; }
}