/* ── Variablen ───────────────────────────────────────────────── */
:root {
  --text:       #18122e;
  --muted:      #4b4960;
  --line:       #d8dbe3;
  --accent:     #14b8c4;
  --sidebar-w:  260px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { margin: 0; font-family: "Maison Neue", system-ui, sans-serif;
        font-size: 1.1rem; color: var(--text); line-height: 1.5; }
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: "Maison Neue", system-ui, sans-serif; font-weight: 600; margin: 0; }
p     { margin: 0 0 0.9rem; max-width: 800px; }


/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;       /* top right bottom left */
  width: var(--sidebar-w);
  padding: 2rem;
  background: #fff;
}

.logo-mark { width: 32px; margin-bottom: 0.5rem; }
.logo-text { width: 32px; }

/* ── Inhalt ──────────────────────────────────────────────────── */
.content {
  margin-left: var(--sidebar-w);
}

@media (max-width: 800px) {
  .sidebar {display: none;}
  .content {margin-left: 0;}
}

/* ── Navigation ──────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  padding: 1.5rem 3rem;
  font-size: 0.95rem;
}
nav a:hover { color: var(--accent); }

/* ── Abschnitte ──────────────────────────────────────────────── */
section {
  padding: 5rem 3rem;
}

/* ── Typografie ──────────────────────────────────────────────── */
.label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}

.lead {
  color: var(--muted);
  max-width: 40rem;
}

.muted { color: var(--muted); font-size: 0.9rem; }

address {
  font-style: normal;
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  line-height: 1.8;
  margin-top: 1rem;
}

address a { color: var(--accent); }
address a:hover { text-decoration: underline; }

#impressum {
  font-size: 0.85rem;
  color: var(--muted);
}

.hero-image,
.section-image {
  display: block;
  width: 100%;
  min-width: 200px;
  max-width: 800px;
  height: auto;
  margin: 0;
}

.figure {
  margin: 2rem 0 2rem;
}

.figure figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}