/* ELOS Management GmbH — Website
   Letterhead-inspired design, palette drawn from the client's own photo of
   the Hamburg Rathaus: warm sandstone paper, Hanseatic brick-red accent,
   oxidised copper-green (Rathaus roof) as the second accent. System font
   stack only — no external requests of any kind, by design (see
   Datenschutzerklärung). */

:root {
  --ink: #1b2a2f;
  --paper: #f6f2ea;
  --accent: #8a3126;
  --accent-soft: #f0e2dc;
  --patina: #4f7566;
  --line: #ddd3c2;
  --muted: #5b6a63;
  --surface: var(--paper);
  --text: var(--ink);
  --shadow: 0 1px 0 rgba(27, 42, 47, 0.06);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece7dc;
    --paper: #141c1f;
    --accent: #d1594e;
    --accent-soft: #2c1e1c;
    --patina: #86b39f;
    --line: #2c3538;
    --muted: #9fb0a8;
    --surface: var(--paper);
    --text: var(--ink);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --ink: #ece7dc;
  --paper: #141c1f;
  --accent: #d1594e;
  --accent-soft: #2c1e1c;
  --patina: #86b39f;
  --line: #2c3538;
  --muted: #9fb0a8;
  --surface: var(--paper);
  --text: var(--ink);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  padding-inline: max(20px, calc((100% - 760px) / 2));
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

img, svg { max-width: 100%; }
address { font-style: normal; }

/* Masthead */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 28px 18px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.masthead nav {
  display: flex;
  gap: 22px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--accent); }

/* Hero */
.hero {
  padding-block: 44px 40px;
  display: grid;
  gap: 28px;
  min-width: 0;
}

.hero > * { min-width: 0; }

.hero .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patina);
  margin: 0;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
  max-width: 20ch;
}

.hero p.lede {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
}

/* Hero photograph, shown whole — like a photograph mounted on a page,
   framed by a copper-green keyline that echoes the Rathaus roof in the
   picture itself. Nothing is cropped: the image keeps its own portrait
   proportions instead of being forced into a wide banner. */
.hero-photo {
  width: min(100%, 520px);
  margin: 4px auto 0;
  padding: 8px;
  border: 1px solid var(--patina);
  box-sizing: border-box;
}

.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-caption {
  margin: 14px 0 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}

/* Section rule */
.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.section-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patina);
  margin: 0 0 18px;
}

/* Contact ledger */
.ledger {
  padding-block: 40px;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  min-width: 0;
}

.ledger > * { min-width: 0; }

.ledger dt {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.ledger dd {
  margin: 0 0 18px;
  font-size: 1.02rem;
}

.ledger dd:last-child { margin-bottom: 0; }

.ledger a { text-decoration: none; }
.ledger a:hover { text-decoration: underline; }

/* Footer */
footer.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 22px 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 0.82rem;
  color: var(--muted);
}

footer.site-foot .legal-links { display: flex; gap: 18px; }
footer.site-foot a { color: var(--muted); }
footer.site-foot a:hover { color: var(--accent); }

/* Legal / document pages */
.doc {
  padding-block: 40px 20px;
}

.doc .back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--muted);
}
.doc .back-link:hover { color: var(--accent); }

.doc h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 6px;
}

.doc .updated {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 36px;
}

.doc h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 2.2em 0 0.6em;
  color: var(--ink);
}

.doc h2:first-of-type { margin-top: 0; }

.doc p, .doc li { max-width: 68ch; }
.doc address { font-style: normal; }

.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 0.4em; }

@media (max-width: 480px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 10px; }
  footer.site-foot { flex-direction: column; align-items: flex-start; }
}