/* Newsletter — eine Spalte, ohne JavaScript, hell und dunkel.
   Systemschriften: es wird nichts nachgeladen. */

:root {
  --grund:  #ffffff;
  --schrift:#1a1a1a;
  --leise:  #5a5a5a;
  --linie:  #e0e0e0;
  --link:   #0b5cad;
  --merk:   #fff8e1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:  #16181c;
    --schrift:#e6e6e6;
    --leise:  #9aa0a6;
    --linie:  #2c2f35;
    --link:   #7ab7f5;
    --merk:   #2e2a1c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1.5rem 1.1rem 4rem;
  max-width: 42rem;              /* ~700 px */
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  hyphens: auto;
}

a { color: var(--link); }

header {
  border-bottom: 1px solid var(--linie);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: .3rem 0; }
h2 {
  font-size: 1.15rem;
  margin: 2.8rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--linie);
  color: var(--leise);
  text-transform: uppercase;
  letter-spacing: .06em;
}
h3 { font-size: 1.22rem; line-height: 1.3; margin: 2rem 0 .4rem; }

.pfad, .datum { color: var(--leise); font-size: .9rem; margin: .2rem 0; }

.hinweis {
  background: var(--merk);
  border-left: 3px solid var(--leise);
  padding: .7rem .9rem;
  font-size: .95rem;
}

article { margin-bottom: 2.4rem; }

.herkunft {
  color: var(--leise);
  font-size: .85rem;
  line-height: 1.5;
  margin-top: .7rem;
  padding-top: .5rem;
  border-top: 1px solid var(--linie);
}

ul.archiv, ul.themen { list-style: none; padding: 0; }
ul.archiv li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
ul.themen li { padding: .9rem 0; border-bottom: 1px solid var(--linie); }
ul.themen a { font-size: 1.2rem; display: block; }
ul.themen .datum { display: block; }

@media (max-width: 30rem) {
  body { font-size: 1.02rem; padding: 1rem .9rem 3rem; }
  h1 { font-size: 1.35rem; }
}