/* Martin Decher – persönliche Profilseite
   Gestaltung „Briefbogen trifft Kontenblatt“:
   Die Seite ist ein Bogen Papier mit der Lineatur eines Kontenblatts.
   Rote Spaltenlinien (Rost aus dem Portrait), blassblaue Zeilenlinien,
   Randspalte für Bezeichnungen, Betragsspalte für Jahreszahlen,
   doppelter Summenstrich als Abschluss. Eine Schrift, die Stimme eines Briefes.
   CSP-kompatibel: keine Inline-Styles, kein JavaScript. */

/* MD Serif = Source Serif 4, gekürzt und umbenannt (SIL OFL), siehe fonts/md-serif-LICENSE.md */
@font-face {
  font-family: "MD Serif";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/md-serif-latin-wght.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --desk: #e6dfd1;
  --paper: #f7f3ea;
  --ink: #1d2530;
  --muted: #4b525b;
  --accent: #8a4528;
  --accent-dark: #6e3620;
  --rule-red: rgb(160 72 40 / 0.38);
  --rule-blue: #c6d1db;
  --slot: #ede7dc;
  --todo-bg: #f8e3a0;
  --todo-ink: #382a00;

  --serif: "MD Serif", Georgia, "Times New Roman", serif;

  --sheet: 80rem;
  --pad: clamp(1rem, 4vw, 4rem);
  --m: 11rem;
  --f: 8.5rem;
  --g: clamp(1.5rem, 3vw, 3rem);
  --measure: 38rem;
}

/* Grundlagen */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  font-synthesis: none;
  overflow-wrap: normal;
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: #ffffff;
}

mark.todo {
  padding: 0.05em 0.3em;
  border-radius: 2px;
  background: var(--todo-bg);
  color: var(--todo-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Das Blatt und sein Raster */

.sheet {
  max-width: var(--sheet);
  min-height: 100vh;
  margin-inline: auto;
  padding-inline: var(--pad);
  background: var(--paper);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Beschriftungen wie Kontenbezeichnungen: echte Kapitälchen, gesperrt */

.chapter h2,
.chapter h3,
.legal h2,
.role,
.wordmark,
.head-nav a,
.head-ext,
.button,
.contact-ways dt,
.foot-links a {
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  font-synthesis: none;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* Doppelter Summenstrich */

.hero h1::after,
.legal h1::after {
  display: block;
  width: 4.5rem;
  height: 7px;
  margin-top: 1.5rem;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  content: "";
}

/* Briefkopf */

.head {
  grid-template-areas:
    "mark ext"
    "nav nav";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding-block: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--rule-blue);
}

.wordmark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.wordmark:hover {
  color: var(--ink);
}

.head-nav {
  grid-area: nav;
}

.head-nav ul,
.note-links,
.foot-links {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

.head-nav ul {
  gap: 0 1.5rem;
}

.head-nav a,
.head-ext {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
}

.head-nav a:hover,
.head-ext:hover {
  color: var(--accent);
}

.head-ext {
  grid-area: ext;
  gap: 0.3rem;
  justify-self: end;
  color: var(--ink);
}

/* Kopfbereich */

.hero {
  gap: 2rem;
  padding-block: clamp(2rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
}

.portrait {
  order: -1;
  width: min(100%, 10rem);
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #6b4636;
}

.hero h1 {
  font-size: clamp(3rem, 1.6rem + 5.2vw, 6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.role {
  margin-top: 1.5rem;
}

.intro {
  max-width: var(--measure);
  margin-top: 2rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
  line-height: 1.55;
}

.intro p + p {
  margin-top: 0.8em;
}

.signature {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  max-width: 22rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
}

.signature img {
  width: auto;
  height: 4.5rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #ffffff;
  text-decoration: none;
}

.button:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: #ffffff;
}

.button-quiet {
  background: transparent;
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Zuordnung: ein Vermerk am Fuß des Kopfes */

.note {
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-blue);
  color: var(--muted);
}

.note-body p {
  max-width: 46rem;
}

.note-links {
  gap: 0.25rem 2rem;
  align-items: center;
  margin-top: 0.5rem;
  color: var(--ink);
}

/* Kapitel */

.chapter {
  row-gap: 1.25rem;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--rule-blue);
}

.chapter h2 {
  color: var(--accent);
}

.chapter h3 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--muted);
}

.chapter h3:first-child {
  margin-top: 0;
}

.chapter-body {
  min-width: 0;
  max-width: 46rem;
}

.prose {
  max-width: var(--measure);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.prose p + p {
  margin-top: 0.85em;
}

/* Werdegang als Kontenblatt: Buchungstext links, Jahr in der Betragsspalte */

.ledger {
  margin-top: 1.75rem;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.ledger li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule-blue);
  font-size: 1.125rem;
}

.figure {
  justify-self: end;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ledger .ledger-total {
  border-bottom: 0;
}

.ledger-total .figure {
  padding-bottom: 0.2rem;
  border-bottom: 4px double var(--accent);
}

/* Schwerpunkte als liniierte Zeilen */

.lines {
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.lines li {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--rule-blue);
  font-size: 1.1875rem;
}

/* Persönlich */

.personal-photo .photo-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 1.5rem;
  border: 1px dashed #a39a8b;
  background: var(--slot);
  font-size: 0.9375rem;
  text-align: center;
}

.personal-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.personal-photo figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.personal-quote {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-left: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.4;
}

.personal-quote::before {
  position: absolute;
  top: 0.02em;
  left: 0;
  color: var(--accent);
  font-size: 1.6em;
  line-height: 1;
  content: "»";
  content: "»" / "";
}

.personal-text {
  margin-top: 2rem;
  padding-left: clamp(2rem, 4vw, 3rem);
}

/* Kontakt */

.contact {
  display: grid;
  gap: 2rem;
  max-width: none;
}

.contact-address {
  font-size: 1.125rem;
  font-style: normal;
}

.contact-address p + p {
  margin-top: 1rem;
}

.contact-name {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.contact-role {
  color: var(--muted);
  font-size: 1.0625rem;
  font-weight: 400;
}

.contact-ways > * + * {
  margin-top: 1rem;
}

.contact-ways dl {
  border-top: 2px solid var(--ink);
}

.contact-ways dl div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--rule-blue);
}

.contact-ways dt {
  color: var(--muted);
}

.contact-ways dd a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (min-width: 40rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--g);
  }
}

/* Fuß: doppelter Strich, die Seite ist abgeschlossen */

.foot {
  gap: 0.75rem;
  padding-block: 1.75rem 3rem;
  border-top: 4px double var(--ink);
  color: var(--muted);
  font-size: 0.9375rem;
}

.foot-links {
  gap: 0 1.75rem;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}

/* Unterseiten */

.legal {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
}

.legal > * {
  max-width: 44rem;
}

.legal h1 {
  margin-bottom: 2rem;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.legal h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.legal p + p {
  margin-top: 1rem;
}

.legal ol {
  padding-left: 1.5rem;
}

.legal ol li + li {
  margin-top: 1.25rem;
}

.legal ol li::marker {
  color: var(--accent);
  font-weight: 600;
}

/* Ab Tablet quer: das volle Kontenraster */

@media (min-width: 56rem) {
  .sheet {
    /* Spaltenlinien: doppelt rot vor der Textspalte, einfach rot vor der Betragsspalte */
    background-image:
      linear-gradient(var(--rule-red), var(--rule-red)),
      linear-gradient(var(--rule-red), var(--rule-red)),
      linear-gradient(var(--rule-red), var(--rule-red));
    background-position:
      calc(var(--pad) + var(--m) + var(--g) / 2 - 2px) 0,
      calc(var(--pad) + var(--m) + var(--g) / 2 + 2px) 0,
      right calc(var(--pad) + var(--f) + var(--g) / 2) top 0;
    background-repeat: no-repeat;
    background-size: 1px 100%;
  }

  .row {
    grid-template-columns: var(--m) minmax(0, 1fr) var(--f);
    column-gap: var(--g);
  }

  /* Kopf: Name am Rand, Navigation in der Textspalte, MTJZ in der Betragsspalte */
  .head {
    grid-template-areas: "mark nav ext";
    align-items: center;
    padding-block: 1rem;
  }

  .wordmark {
    font-size: 1.0625rem;
  }

  .head-nav ul {
    gap: 0 2.25rem;
  }

  /* Kopfbereich: Portrait in der Randspalte wie auf einem Lebenslauf */
  .hero {
    align-items: start;
  }

  .hero-text {
    grid-column: 2;
  }

  .portrait {
    order: 0;
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    margin-top: 0.75rem;
  }

  .note-body {
    grid-column: 2;
  }

  .chapter h2 {
    grid-column: 1;
    padding-top: 0.35rem;
  }

  .chapter-body {
    grid-column: 2;
  }

  .ledger {
    grid-column: 2 / 4;
  }

  .ledger li {
    grid-template-columns: minmax(0, 1fr) var(--f);
    column-gap: var(--g);
  }

  .contact {
    max-width: 52rem;
  }

  .foot-line {
    grid-column: 2;
  }

  .foot-links {
    grid-column: 3;
    flex-direction: column;
    align-items: flex-end;
  }

  .foot-links a {
    min-height: 32px;
  }

  .legal > * {
    grid-column: 2;
  }
}

/* Große Bildschirme: breitere Randspalte, damit das Portrait Gewicht bekommt */

@media (min-width: 80rem) {
  :root {
    --m: 14rem;
  }
}

/* Bewegung und Druck */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  body,
  .sheet {
    background: #ffffff;
  }

  .skip-link,
  .head-nav,
  .head-ext,
  .actions,
  .note-links {
    display: none;
  }

  .chapter {
    break-inside: avoid;
  }
}