/* Die stillen Seiten: Archiv, Impressum, Datenschutz.
   Kein Canvas, kein JavaScript. Was hier steht, muss gelesen werden können,
   auch von einem Crawler, der keine Skripte ausführt. */

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

:root {
  --papier: #ebeadf;
  --papier-hell: #f3ece4;
  --sand: #eadfd2;
  --kraft: #dbbfa5;
  --tinte: #1f1c1a;
  --tinte-weich: #57504a;
  --orange: #f04923;
  --wald: #253e29;
}

html {
  background: var(--papier);
  scroll-behavior: smooth;
}
body {
  background: var(--papier);
  color: var(--tinte);
  font:
    400 18px/1.72 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.rand {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 6vw;
}
.schmal {
  max-width: 45rem;
}

/* Kopf */
.kopf {
  padding: 2.2rem 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.wortmarke {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinte);
  text-decoration: none;
}
.wortmarke span {
  color: var(--orange);
}
.kopf nav {
  display: flex;
  gap: 1.5rem;
}

.marke {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

a.leise {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
a.leise:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 1.6rem;
}
h1 em {
  font-style: italic;
  color: var(--orange);
}
.vorspann {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--tinte-weich);
  max-width: 38rem;
}

/* Archiv */
.ausgaben {
  margin-top: 4rem;
  border-top: 1px solid color-mix(in srgb, var(--tinte) 20%, transparent);
}
.ausgabe {
  border-bottom: 1px solid color-mix(in srgb, var(--tinte) 20%, transparent);
  padding: 2.2rem 0;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0 2.5rem;
}
.ausgabe .kennung {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.punkt {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}
.ausgabe h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.ausgabe h2 a {
  color: inherit;
  text-decoration: none;
}
.ausgabe h2 a:hover {
  color: var(--orange);
}
.ausgabe p {
  margin-top: 0.8rem;
  color: var(--tinte-weich);
  max-width: 42rem;
}
.ausgabe .fussnote {
  margin-top: 0.9rem;
}

.hinweis {
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  background: var(--papier-hell);
  color: var(--tinte-weich);
  font-size: 0.95rem;
}

/* Rechtstexte */
.rechtstext h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--tinte) 20%, transparent);
}
.rechtstext h2:first-child {
  margin-top: 0;
}
.rechtstext p {
  margin-top: 1.15rem;
  max-width: 42rem;
  color: var(--tinte-weich);
}
/* Offene Stellen sollen im Vorbeigehen auffallen, nicht im Quelltext liegen. */
.rechtstext mark {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent);
  color: var(--tinte);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
}

/* Fuß */
.fuss {
  margin-top: 6rem;
  padding: 2.5rem 0 3rem;
  border-top: 1px solid color-mix(in srgb, var(--tinte) 20%, transparent);
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--tinte-weich);
  font-size: 0.9rem;
}
.fuss nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.knopf {
  display: inline-block;
  margin-top: 2rem;
  background: var(--orange);
  color: var(--papier-hell);
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.2s ease;
}
.knopf:hover {
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .ausgabe {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}


/* ——— Der Ausgabentext ————————————————————————————————————————
   Hier steht der eigentliche Newsletter. Er wird am Stück gelesen, nicht
   überflogen, deshalb bekommt er großzügigen Durchschuss und viel Luft
   zwischen den Abschnitten. Ohne diese Regeln kommt das Markdown roh heraus
   und alles läuft ineinander. */

.ausgabetext {
  margin-top: 3rem;
  max-width: 42rem;
}

.ausgabetext > * + * {
  margin-top: 1.35rem;
}

.ausgabetext p {
  color: var(--tinte-weich);
}

/* Überschriften bekommen deutlich mehr Abstand nach oben als nach unten.
   Das bindet sie an den Text, der ihnen folgt, statt an den davor. */
.ausgabetext h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tinte);
  margin-top: 3.4rem;
}
.ausgabetext h2 + * {
  margin-top: 0.9rem;
}
.ausgabetext h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--tinte);
  margin-top: 2.4rem;
}
.ausgabetext h3 + * {
  margin-top: 0.7rem;
}
.ausgabetext > *:first-child {
  margin-top: 0;
}

.ausgabetext ul,
.ausgabetext ol {
  padding-left: 1.3rem;
  color: var(--tinte-weich);
}
.ausgabetext li + li {
  margin-top: 0.55rem;
}
.ausgabetext li::marker {
  color: var(--kraft);
}

.ausgabetext a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--orange) 55%, transparent);
  transition: color 0.2s ease;
}
.ausgabetext a:hover {
  color: var(--orange);
}

.ausgabetext strong {
  font-weight: 600;
  color: var(--tinte);
}

/* Der kopierbare Teil. Er darf breiter sein als der Fließtext, weil ein
   umbrochener Prompt unbrauchbar ist. */
.ausgabetext pre {
  max-width: 46rem;
  background: var(--papier-hell);
  border-left: 3px solid var(--kraft);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  font: 400 0.9rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--tinte);
}
.ausgabetext code {
  font: 400 0.9em/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--papier-hell);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.ausgabetext pre code {
  background: none;
  padding: 0;
}

.ausgabetext blockquote {
  border-left: 3px solid var(--kraft);
  padding-left: 1.2rem;
  color: var(--tinte-weich);
  font-style: italic;
}

.ausgabetext hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--tinte) 18%, transparent);
  margin-top: 3rem;
}

.ausgabetext img {
  max-width: 100%;
  height: auto;
}

.ausgabetext table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
.ausgabetext th,
.ausgabetext td {
  text-align: left;
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinte) 15%, transparent);
}
.ausgabetext th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

@media (max-width: 640px) {
  .ausgabetext h2 {
    font-size: 1.4rem;
    margin-top: 2.6rem;
  }
  .ausgabetext pre {
    font-size: 0.82rem;
  }
}