/* ================================================================
   Julia Waldmann – faithful recreation from page screenshots
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

a.homepage {
    color:#AAA;
}
a.ueber-mich {
    color:#555;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
}

body {
  background: #fff;
  color: #555;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

/* ── CHINESE CHARACTERS IMAGE ──────────────────────────────────
   Fixed to the left of the viewport, outside the content column.
   Visible in all screenshots at approx left: 40px, top: 50px.
   ──────────────────────────────────────────────────────────── */
#chinese-image {
  position: fixed;
  left: 40px;
  top: 50px;
  width: 125px;   /* natural image width */
  height: auto;
  display: block;
}

/* ── CONTENT COLUMN ─────────────────────────────────────────────
   Starts after the left image area.
   From screenshots: content left edge ≈ 380px from viewport left.
   Max-width ≈ 560px so total content area ≈ 940px wide.
   ──────────────────────────────────────────────────────────── */
#content {
  margin-left: 380px;
  max-width: 560px;
  padding-top: 22px;
  padding-bottom: 60px;
}

/* ── NAVIGATION ─────────────────────────────────────────────────
   Plain gray text links, horizontal, thin rule below.
   ──────────────────────────────────────────────────────────── */
#nav {
  padding-bottom: 11px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0;
}

#nav a {
  font-size: 13px;
  color: #999;
  text-decoration: none;
  margin-right: 20px;
  display: inline-block;
}

#nav a:last-child {
  margin-right: 0;
}

#nav a:hover {
  color: #555;
}

#nav a.active {
  color: #555;
}

/* ── SITE HEADER ROW ────────────────────────────────────────────
   "Julia Waldmann" (bold, large, left) + tagline (small, right)
   on the same row, separated by a thin rule below.
   ──────────────────────────────────────────────────────────── */
#site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 15px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 26px;
}

#site-title {
  font-size: 26px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-decoration: none;
}

#site-tagline {
  font-size: 12px;
  color: #999;
  font-weight: 400;
  padding-left: 20px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── PAGE HEADING ───────────────────────────────────────────────
   e.g. "Impressum", "Datenschutz", "Über mich"
   Gray, normal weight, moderate size.
   ──────────────────────────────────────────────────────────── */
.page-heading {
  font-size: 20px;
  font-weight: 400;
  color: #aaa;
  margin-bottom: 20px;
  line-height: 1.3;
}

/* ── BODY TEXT ──────────────────────────────────────────────────
   Paragraphs are justified (visible in screenshots).
   ──────────────────────────────────────────────────────────── */
.content-body p {
  margin-bottom: 14px;
  text-align: justify;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

.content-body p:last-child {
  margin-bottom: 0;
}

/* Address / non-justified lines */
.content-body .no-justify {
  text-align: left;
}

/* ── IMPRESSUM ──────────────────────────────────────────────────
   Address block, plain text, not justified.
   ──────────────────────────────────────────────────────────── */
.address-block {
  margin-bottom: 14px;
}

.address-block p {
  text-align: left !important;
  margin-bottom: 0;
  line-height: 1.8;
}

/* ── DATENSCHUTZ SECTION HEADINGS ───────────────────────────────
   "Geltungsbereich", "Zugriffsdaten" etc. – same size as body,
   but displayed on their own line (plain paragraph, not heading).
   ──────────────────────────────────────────────────────────── */

/* ── ÜBER MICH – CV ENTRIES ─────────────────────────────────────
   Year line in lighter gray, description below in normal color.
   ──────────────────────────────────────────────────────────── */
.cv-year {
  color: #999 !important;
  text-align: left !important;
  margin-bottom: 2px !important;
  font-size: 14px;
}

.cv-desc {
  text-align: left !important;
  margin-bottom: 16px !important;
  color: #555;
}

.cv-desc:last-of-type {
  margin-bottom: 0 !important;
}

/* ── FOOTER ─────────────────────────────────────────────────────
   Very small gray text, centered or left-aligned with content.
   ──────────────────────────────────────────────────────────── */
#footer {
  margin-left: 380px;
  max-width: 560px;
  padding: 20px 0 30px;
  font-size: 11px;
  color: #aaa;
  border-top: none;
}

#footer a {
  color: #aaa;
  text-decoration: none;
}

#footer a:hover {
  color: #555;
  text-decoration: underline;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────
   On narrow screens, stack the image above the content.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  #chinese-image {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    margin: 20px auto 0;
    width: 90px;
  }
  #content,
  #footer {
    margin-left: 20px;
    padding-right: 20px;
  }
}