/* herrjung.ch – Gestaltung
   Farben und Schriften folgen den Essays (Ground / Ink / Pine / Cedar),
   der Grundton ist etwas wärmer, damit das Gemälde von Chantal Kaufmann
   und das cremefarbene Papier der Broschüre dazu passen. */

:root {
  --ground: #f3f0e9; --paper: #faf8f3; --ink: #1c2620; --ink-soft: #46524b;
  --muted: #626d66; --rule: #d6d2c6; --pine: #2f5d4e; --cedar: #7a5c2e;
  --quote-bg: #ece8dd; color-scheme: light;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Baskerville, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141816; --paper: #1b201d; --ink: #e5e6de; --ink-soft: #bcc2b8;
    --muted: #8b948c; --rule: #363d38; --pine: #86bda4; --cedar: #cfae70;
    --quote-bg: #222925; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #141816; --paper: #1b201d; --ink: #e5e6de; --ink-soft: #bcc2b8;
  --muted: #8b948c; --rule: #363d38; --pine: #86bda4; --cedar: #cfae70;
  --quote-bg: #222925; color-scheme: dark;
}

/* ---------- Grundgerüst ---------- */
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--serif);
  font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--pine); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 66rem; margin: 0 auto; padding: 0 1.5rem; }
.springen { position: absolute; left: -999px; top: 0; background: var(--paper); padding: .5rem 1rem; }
.springen:focus { left: 1rem; z-index: 10; }

.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pine); }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--muted); }

/* Logo-Grafiken sind schwarz auf transparent; im dunklen Schema invertieren */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .invertierbar { filter: invert(1) brightness(.92); }
}
:root[data-theme="dark"] .invertierbar { filter: invert(1) brightness(.92); }

/* ---------- Kopf: Hase auf der Linie, Name, Navigation ---------- */
.site-head { text-align: center; padding: 2.75rem 1.5rem 0; }
.masthead { display: block; text-decoration: none; color: var(--ink); }
.site-head .divider { display: block; width: min(30rem, 100%); margin: 0 auto; }
.site-name { display: block; font-family: var(--display); font-size: 1.55rem; letter-spacing: .01em; margin-top: .55rem; }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.8rem; margin-top: 1.5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.site-nav a { color: var(--muted); text-decoration: none; padding: .35rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); outline: none; }
.site-nav a[aria-current="page"] { color: var(--pine); border-color: var(--pine); }
body.start .site-head .divider { width: min(36rem, 100%); }
body.start .site-name { font-size: 1.9rem; }

/* ---------- Startseite ---------- */
.leitsatz { text-align: center; max-width: 44ch; margin: 2.75rem auto 0; }
.leitsatz p { font-family: var(--display); font-size: 1.4rem; line-height: 1.4; color: var(--ink); margin: .5rem 0 0; text-wrap: balance; }
.leitsatz cite { display: block; font-style: normal; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); margin-top: .7rem; }
.leitsatz.leise { margin-top: 5.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); max-width: 48ch; }
.leitsatz.leise p { font-size: 1.2rem; color: var(--ink-soft); }
.motto.leise { margin-top: 5rem; font-size: 1.1rem; color: var(--muted); }
.motto { text-align: center; font-family: var(--display); font-style: italic; font-size: 1.35rem; line-height: 1.4;
  max-width: 36ch; margin: 2.75rem auto 0; color: var(--ink-soft); text-wrap: balance; }
.motto cite { display: block; font-style: normal; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: .6rem; }

.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; margin: 4rem 0 0; }
.hero figure { margin: 0; }
.hero figure img { display: block; width: 100%; border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule); }
.bildlegende { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; line-height: 1.55; color: var(--muted); margin-top: .8rem; }
.bildlegende a { color: var(--cedar); text-decoration: none; }
.bildlegende a:hover { text-decoration: underline; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.01em; margin: .6rem 0 1.2rem; text-wrap: balance; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; margin: 0 0 1.1rem; }
.hero p { max-width: 58ch; }
.definition { border-top: 1px solid var(--cedar); border-bottom: 1px solid var(--cedar); padding: 1.1rem 0 1rem; margin: 1.8rem 0;
  font-family: var(--display); font-style: italic; font-size: 1.45rem; line-height: 1.3; color: var(--pine); max-width: 30ch; text-wrap: balance; }
.definition small { display: block; font-family: var(--mono); font-style: normal; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cedar); margin-top: .6rem; }

.abschnitt { margin: 5rem 0 0; }
.abschnitt-kopf { display: flex; align-items: baseline; gap: 1.2rem; border-bottom: 1px solid var(--rule); padding-bottom: .7rem; margin-bottom: 1.8rem; }
.abschnitt-kopf h2 { font-family: var(--display); font-weight: 400; font-size: 1.75rem; margin: 0; }
.abschnitt-kopf .mono { margin-left: auto; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.6rem; }
.karte { background: var(--paper); border: 1px solid var(--rule); padding: 1.9rem 2rem 1.7rem; display: flex; flex-direction: column; gap: .8rem;
  position: relative; transition: border-color .2s; }
.karte:hover { border-color: var(--cedar); }
.karte h3, .karte h2 { font-family: var(--display); font-weight: 400; font-size: 1.65rem; line-height: 1.15; margin: 0; text-wrap: balance; }
.karte h3 a, .karte h2 a { color: inherit; text-decoration: none; }
.karte h3 a::after, .karte h2 a::after { content: ""; position: absolute; inset: 0; }
.karte p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.karte .untertitel { font-style: italic; color: var(--ink); }
.karte .weiter { margin-top: auto; padding-top: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cedar); }
.karte.mit-bild { display: grid; grid-template-columns: 7.5rem 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 1.5rem; }
.karte.mit-bild > img { grid-row: 1 / span 3; border: 1px solid var(--rule); align-self: start; }
.karte.mit-bild > img.invertierbar { border: none; }
.karte.mit-bild .weiter { grid-column: 1 / -1; align-self: end; }

/* Startseite: „Zuletzt veröffentlicht“ als Liste */
.neu { list-style: none; margin: 0; padding: 0; }
.neu-eintrag { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; column-gap: 2.5rem; align-items: start;
  padding: 1.8rem 0; border-bottom: 1px solid var(--rule); position: relative; }
.neu-eintrag:last-child { border-bottom: none; }
.neu-meta .mono { margin-top: .35rem; }
.neu-text h3 { font-family: var(--display); font-weight: 400; font-size: 1.65rem; line-height: 1.15; margin: -.2rem 0 .5rem; text-wrap: balance; }
.neu-text h3 a { color: inherit; text-decoration: none; }
.neu-text h3 a::after { content: ""; position: absolute; inset: 0; }
.neu-text p { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.neu-text .untertitel { font-style: italic; color: var(--ink); }
.neu-text .weiter { display: block; margin-top: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cedar); }
.neu-bild { width: 6.5rem; border: 1px solid var(--rule); }
.neu-eintrag:hover h3 a { color: var(--pine); }

/* ---------- Innere Seiten: Prosa ---------- */
.seite { max-width: 46rem; margin: 3rem auto 0; }
.seite h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em; margin: .5rem 0 1rem; text-wrap: balance; }
.seite .untertitel { font-size: 1.25rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; max-width: 40ch; margin: 0 0 1.5rem; }
.prosa p { max-width: 66ch; margin: 0 0 1.1rem; hyphens: auto; }
.prosa h2 { font-family: var(--display); font-weight: 400; font-size: 1.65rem; line-height: 1.2; margin: 3rem 0 1rem; }
.prosa h3 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--pine); margin: 2rem 0 .6rem; }
.prosa blockquote { margin: 1.6rem 0; padding: 1rem 1.25rem 1rem 1.4rem; background: var(--quote-bg); border-left: 3px solid var(--pine);
  font-size: 1.05rem; line-height: 1.55; max-width: 62ch; }
.prosa blockquote p { margin: 0 0 .4rem; }
.prosa blockquote cite { display: block; font-style: normal; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--muted); }
.prosa ul { max-width: 62ch; padding-left: 1.2rem; }
.prosa li { margin-bottom: .4rem; }
.hinweis { border: 1px dashed var(--cedar); padding: .8rem 1rem; font-size: .95rem; color: var(--ink-soft); max-width: 62ch; }

.fakten { display: grid; grid-template-columns: 9rem 1fr; gap: .35rem 1rem; margin: 1.5rem 0 2rem; font-size: .98rem; max-width: 40rem; }
.fakten dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cedar); padding-top: .25rem; }
.fakten dd { margin: 0; line-height: 1.45; }

.knopfleiste { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.5rem 0 2.5rem; }
.knopf { display: inline-block; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: .7rem 1.1rem; border: 1px solid var(--pine); color: var(--pine); background: transparent; }
.knopf:hover, .knopf:focus-visible { background: var(--pine); color: var(--paper); outline: none; }
.knopf.zweit { border-color: var(--rule); color: var(--ink-soft); }
.knopf.zweit:hover, .knopf.zweit:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--cedar); }

/* Über: Porträt neben dem Text */
.portraet { float: right; width: min(17rem, 42%); margin: .4rem 0 1.2rem 2.2rem; }
.portraet img { display: block; border: 1px solid var(--rule); }
.prosa h2 { clear: both; }
.prosa blockquote.breit { max-width: none; clear: both; }
.prosa blockquote.breit p { max-width: none; white-space: nowrap; }
@media (max-width: 860px) { .prosa blockquote.breit p { white-space: normal; } }

/* Broschüre: Umschlag neben Text */
.broschuere { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3rem; align-items: start; margin-top: 3rem; }
.broschuere .umschlag { position: sticky; top: 1.5rem; }
.broschuere .umschlag img { display: block; width: 100%; border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.beitrag { margin-top: 3.5rem; border-top: 1px solid var(--rule); padding-top: 2.5rem; }
.beitrag .eyebrow { margin-bottom: .3rem; }
.beitrag h2.beitrag-titel { margin-top: 0; font-size: 2.1rem; }
.beitrag .autor { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 1.8rem; }
.beitrag-bild { margin: 2rem 0; max-width: 24rem; }
.beitrag-bild img { display: block; border: 1px solid var(--rule); }

/* Essay-Verzeichnis */
.essay-liste { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.6rem; }

/* ---------- Essay-Blatt (entspricht dem Essay-Builder) ---------- */
.sheet { background: var(--paper); max-width: 46rem; margin: 2.5rem auto 0; padding: 4rem 3.5rem 4.5rem; border: 1px solid var(--rule); }
.sheet h1, .sheet h2 { font-family: var(--display); font-weight: 400; color: var(--ink); text-wrap: balance; margin: 0; }
.sheet .essay-kopf { display: grid; gap: 1rem; margin-bottom: 1.2rem; }
.sheet h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; }
.sheet .subtitle { font-size: 1.25rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; max-width: 34ch; margin: 0; }
.sheet .dates { font-family: var(--mono); font-size: .8rem; color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--rule); padding-top: .9rem; }
.essay-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 2.4rem; }
.essay-meta a { color: var(--cedar); text-decoration: none; }
.essay-meta a:hover { text-decoration: underline; }
.sheet h2 { font-size: 1.65rem; line-height: 1.2; margin: 3rem 0 1rem; }
.sheet p { margin: 0 0 1.1rem; max-width: 66ch; hyphens: auto; }
.sheet blockquote { margin: 1.6rem 0; padding: 1rem 1.25rem 1rem 1.4rem; background: var(--quote-bg); border-left: 3px solid var(--pine);
  font-size: 1.05rem; line-height: 1.55; max-width: 62ch; }
.sheet blockquote p { margin: 0 0 .4rem; }
.sheet blockquote cite { display: block; font-style: normal; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--muted); }
.sheet aside.term { margin: 1.8rem 0; padding: 1.1rem 0 1rem; border-top: 1px solid var(--cedar); border-bottom: 1px solid var(--cedar); max-width: 62ch; }
.sheet aside.term .term-word { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; font-style: italic; color: var(--pine); letter-spacing: -.01em; }
.sheet aside.term .term-gloss { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cedar); margin: .35rem 0 .8rem; }
.sheet aside.term p { margin: 0; font-size: .98rem; line-height: 1.55; }
.sheet .table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.sheet table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sheet table caption { text-align: left; caption-side: top; font-size: .95rem; color: var(--ink); padding-bottom: .5rem; }
.sheet table td { padding: .32rem .5rem; border-bottom: 1px dotted var(--rule); vertical-align: top; }
.sheet table td:first-child { padding-left: 0; }
.sheet table td:last-child { padding-right: 0; }
.sheet table.ledger { max-width: 34rem; font-family: var(--mono); font-size: .82rem; }
.sheet table.ledger td:last-child { text-align: right; white-space: nowrap; }
.sheet table td .note { color: var(--muted); font-style: italic; }
.sheet table tr.total td { border-top: 1px solid var(--cedar); border-bottom: none; color: var(--ink); font-weight: 500; padding-top: .5rem; }
.sheet table.glossary { font-size: .95rem; line-height: 1.45; }
.sheet table.glossary td:first-child { width: 9rem; color: var(--pine); font-weight: 600; }
.sheet .timeline { display: grid; grid-template-columns: 5.5rem 1fr; gap: .35rem 1rem; margin: 1.2rem 0 0; max-width: 40rem; }
.sheet .timeline dt { font-family: var(--mono); font-size: .8rem; color: var(--cedar); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.sheet .timeline dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.sheet figure.bild { margin: 2rem 0; max-width: 22rem; }
.sheet figure.bild img { display: block; width: 100%; border: 1px solid var(--rule); }
.sheet figure.bild figcaption { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; line-height: 1.55; color: var(--muted); margin-top: .8rem; }
.sheet .herkunft { margin-top: 2rem; font-size: .92rem; color: var(--muted); font-style: italic; }
.sheet .vignette { display: block; width: min(24rem, 100%); margin: 3.5rem auto 0; }
.sheet .essay-fuss { margin-top: 1.2rem; text-align: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.sheet .essay-fuss a { color: var(--cedar); text-decoration: none; }

/* ---------- Fuß ---------- */
.site-foot { margin: 6rem auto 3rem; padding: 2.5rem 1.5rem 0; text-align: center; border-top: 1px solid var(--rule); max-width: 66rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.site-foot .logo { width: 2.6rem; display: block; margin: 0 auto 1rem; }
.site-foot a { color: var(--cedar); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .8rem; text-transform: uppercase; }
.foot-nav a { color: var(--muted); }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 760px) {
  body { font-size: 1.05rem; }
  .site-head { padding-top: 1.8rem; }
  .hero, .broschuere, .karte.mit-bild { grid-template-columns: 1fr; }
  .hero { gap: 2rem; margin-top: 2.5rem; }
  .karte.mit-bild > img { grid-row: auto; max-width: 9rem; }
  .broschuere .umschlag { position: static; max-width: 18rem; }
  .portraet { float: none; width: 100%; max-width: 20rem; margin: 1.5rem 0; }
  .sheet { padding: 2.25rem 1.25rem 3rem; margin-top: 1.5rem; }
  .fakten { grid-template-columns: 1fr; gap: .1rem; }
  .neu-eintrag { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; }
  .neu-bild { order: -1; width: 5.5rem; }
  .fakten dd { margin-bottom: .6rem; }
}

@media print {
  @page { size: A4; margin: 20mm 22mm; }
  html, body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .site-head, .site-foot, .essay-meta, .knopfleiste, .springen { display: none; }
  .sheet { border: none; padding: 0; max-width: none; background: #fff; }
  .sheet h2 { break-after: avoid; }
  .sheet h2.newpage { break-before: page; }
  .sheet blockquote, .sheet aside.term { break-inside: avoid; }
  .sheet p { max-width: none; }
}

/* Verantwortungshinweis am Ende jedes Essays (aus dem Builder übernommen) */
.verantwortung { margin: 2.5rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule); font-size: .85rem; line-height: 1.5; color: var(--muted); max-width: 66ch; }
.verantwortung span { display: block; }
.verantwortung span + span { margin-top: .45rem; }

/* Formulare (Kontakt, Statistik) */
.formular label { display: block; margin: 0 0 1rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.formular input, .formular textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .35rem; padding: .6rem .7rem; font: inherit; font-family: var(--serif); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0; }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pine) 25%, transparent); }
.formular textarea { min-height: 11rem; resize: vertical; line-height: 1.5; }
.formular button { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--pine); border: 1px solid var(--pine); padding: .7rem 1.4rem; cursor: pointer; }
.formular button:hover, .formular button:focus-visible { background: var(--ink); border-color: var(--ink); outline: none; }
.formular .fehler { border: 1px solid var(--cedar); color: var(--cedar); padding: .7rem 1rem; margin: 0 0 1.2rem; }
.formular .erfolg { border: 1px solid var(--pine); color: var(--pine); padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.formular .abseits { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.formular .hinweis { font-size: .9rem; color: var(--muted); }
.zeitraum input[type="date"] { width: auto; display: inline-block; margin-top: .35rem; }
.zeitraum button { padding: .55rem 1.1rem; }