/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; 
}
/* ── Variablen ───────────────────────────────────────── */
:root {
  --black: #111;
  --mid: #888;
  --light: #ddd;
  --bg: #faf9f7;
  --red: #fc0000;
  --nav-w: 13rem;
  --sans-serif: system-ui;
}
/* ── Basis ───────────────────────────────────────────── */
html { font-size: 18px; 
}
body {
  min-height: 100vh;
  line-height: 1.4rem;
  color: var(--black);
  background: var(--bg);
  font-family: system ui var(--sans-serif);
}
/* ── Seitenraster ────────────────────────────────────── */
.site {
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--nav-w) 1fr;
}
/* ── Navigation ──────────────────────────────────────── */
nav {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--30vw);
  flex-direction: column;
  justify-content: space-between;
  padding: 2.8rem 1.8rem 2.2rem;
  border-right: 1px solid var(--light);
  background: var(--bg);
  overflow-y: auto;
  z-index: 10;
}
.nav-name {
  line-height: 1.4;
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
}
.nav-links {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.nav-links a {
  display: block;
  color: var(--mid);
  font-size: 0.95rem;
  padding: 0.15rem 0;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover  { 
  color: var(--black); 
  border-bottom-color: var(--black); 
}
.nav-links a.active { 
  color: var(--black); 
  border-bottom-color: var(--black); 
  }
.nav-contact { 
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  color: var(--mid); 
  font-size: 0.95rem;
  padding: 0.50rem 0; 
  transition: color 0.15s;
  border-bottom: 1px solid transparent;
  }
.nav-contact a {
  color: var(--mid);
  text-decoration: none;
}
.nav-contact a:hover { 
  color: var(--black); 
  border-bottom: 1px solid var(--black);
  transition: color 0.15s, border-color 0.15s;
  }
.nav-contact a.active { 
  color: var(--black); 
  border-bottom-color: var(--black); 
  }
/* ── Hamburger (nur mobile) ──────────────────────────── */
.hamburger {
  display: none;
  position: fixed;
  top: 1.2rem; right: 1.2rem;
  background: none;
  padding: 0.4rem;
  cursor: pointer;
  border: none;
  z-index: 20;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 5px 0;
  background: var(--black);
  transition: transform 0.25s, opacity 0.25s;
}
body.nav-open .hamburger span:nth-child(1) { 
  transform: translateY(6px) rotate(45deg); 
  }
body.nav-open .hamburger span:nth-child(2) { 
  opacity: 0; 
  }
body.nav-open .hamburger span:nth-child(3) { 
  transform: translateY(-6px) rotate(-45deg); 
  }
/* ── Fade-Animation ──────────────────────────────────── */
@keyframes fadein {
  from { opacity: 0; transform: translateY(100vh); }
  to { opacity: 1; transform: translateY(0); }
}
/* ── Hauptbereich ────────────────────────────────────── */
main {
  grid-column: 2;
  margin-top: 2.5rem;
  margin-right: 1.5rem;
  animation: fadein 2s ease 0.15s forwards;
  text-align: justify;
  opacity: 0;
}
/* ── Home ──────────────────────────────────────── */
.home {
  color: red;
  font-weight: 520;
  margin-top: 2rem;
  font-size: var(--2vh, 17vh);
  line-height: var(--2vh, 16vh);
  }
/* ── Texte: Bücher ───────────────────────────────────── */
.books {
  display: block;
  line-height: 1.5;
  margin-bottom: 2.8rem;
}
.book {
  line-height: 1.5;
  font-size: 0.98rem;
}
.book a {
  color: var(--black);
  margin-left: 1rem;
  text-decoration: none;
  transition: border-color 0.15s;
  border-bottom: 1px solid transparent;
}
.book a:hover { 
  border-bottom-color: var(--black); 
}
.book-year {
  display: block;
  color: var(--mid);
  font-size: 0.98rem;
}
/* ── Texte: Aufsätze ─────────────────────────────────── */
.decade { 
  margin-bottom: 2.8rem; 
}
.decade-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  0.9rem;
  color: var(--mid);
}
.entries { 
list-style: none; 
}
.entries li {
  display: flex;
  align-items: baseline;
  font-size: 0.98rem;
  line-height: 1.5;
  gap: 0.8rem;
}
.entries li:last-child { 
  border-bottom: none; 
}
.entry-year {
  color: var(--mid);
  font-size: 0.98rem;
  min-width: 2.5rem;
  flex-shrink: 0;
}
.entry-title a {
  color: var(--black);
  text-decoration: none;
  transition: border-color 0.15s;
  border-bottom: 1px solid transparent;
}
.entry-title a:hover { 
  border-bottom-color: var(--black); 
}
.entry-title em {
  color: var(--mid);
  font-style: normal;
  font-size: 0.98rem;
}
/* ── Texte: Meta-Links ───────────────────────────────── */
.meta-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.98rem;
}
.meta-links a {
  color: var(--mid);
  text-decoration: none;
  transition: color 0.15s;
}
.meta-links a:hover { 
  color: var(--black);
  border-bottom: 1px solid var(--black);
}
/* ── Bildergalerie ───────────────────────────────────── */
.gallery {
  columns: 3;
  column-gap: 0.6rem;
}
.gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 0.6rem;
}
.gallery-item img {
  height: auto;
  width: 100%;
  display: block;
  transition: opacity 0.25s;
}
.gallery-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(250,249,247,0.92);
  padding: 0.3rem 0.3rem;
  transition: opacity 1s;
  line-height: 1rem;
  font-size: 0.7rem;
  color: var(--black);
  opacity: 0;
}
.gallery-item:hover figcaption { 
  opacity: 1; 
}
/* ── Objekte: Dreiergruppen ──────────────────────────── */
.objekt-gruppe {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.objekt-gruppe a {
  flex: 1;
  display: block;
  overflow: hidden;
}
.objekt-gruppe a img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.25s;
}
.objekt-gruppe a:hover img { 
  opacity: 1; 
}
/* ── Info ────────────────────────────────────────────── */
.info-portrait {
  width: min(40rem, 100%);
  height: auto;
  display: block;
  margin-bottom: 2rem;
  filter: grayscale(15%);
  column-gap: 1rem;
  columns: 2;
}
.info-text {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--black);
  column-gap: 1rem;
  columns: 2;
}
.info-text a {
  color: var(--mid);
  text-decoration: none;
  transition: color 0.15s;
}
.info-text a:hover { 
  color: var(--black); 
  text-decoration: none;
  border-bottom: 1px solid var(--black);
  transition: color 0.15s, border-color 0.15s;
}
/* ── Impressum ───────────────────────────────────────── */
.impressum-text {
  font-size: 0.78rem;
  color: var(--black);
  text-align:justify;
  line-height: 1.2;
}
.impressum-text a {
  color: var(--mid);
}
.impressum-text a:hover { 
  color: var(--black); 
  border-bottom-color: var(--black); 
}
/* ── Responsive: Tablet ──────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  :root { --nav-w: 9rem; }
  html  { font-size: 16px; }
  main  { padding: 3rem 3vw 4rem 3rem; }
  .gallery { columns: 2; }
  .books   { grid-template-columns: repeat(2, 1fr); }
}
/* ── Responsive: Mobile ──────────────────────────────── */
@media (max-width: 640px) {
  .site { grid-template-columns: 1fr; }
  nav {
    width: 100%;
    height: auto;
    min-height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-bottom: 1px solid var(--light);
    padding: 4rem 2rem 2rem;
    border-right: none;
  }
  body.nav-open nav { transform: translateX(0); }
  .hamburger { display: block; }
  main {
    grid-column: 1;
    padding: 0.4rem 1.4rem 4rem;
  }
  .gallery { columns: 1; }
  .objekt-gruppe { flex-direction: column; }
  .books { grid-template-columns: 1fr; }
  .entries li { flex-direction: column; gap: 0.2rem; }
  .entry-year { min-width: auto; }
}