/* ============================================================
   THEME "RASTER"
   Swiss Style / International Typographic Style fuer HTMLy
   Autor: Udo C. Goetz
   ------------------------------------------------------------
   Satzbreite anpassen: --max
   Akzentfarbe anpassen: --red
   ============================================================ */

:root{
  --paper:#ffffff;
  --ink:#111111;
  --red:#e30613;
  --rule:#d6d6d6;
  --grey:#6f6f6f;
  --sand:#f2f2f0;

  --footer-bg:#111111;
  --footer-text:#ffffff;
  --footer-muted:#8a8a8a;
  --footer-rule:#333333;

  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --gap:24px;
  --max:1080px;
  --measure:640px;
  --pad:32px;
}


/* ---------- Dunkelmodus ------------------------------------ */
/* Ohne eigene Wahl folgt die Seite der Systemeinstellung.
   Der Knopf im Kopf setzt data-theme und ueberschreibt das. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f0f0f;
    --ink:#f0f0ee;
    --red:#ff3b21;
    --rule:#2e2e2e;
    --grey:#9a9a9a;
    --sand:#1a1a1a;
    --footer-bg:#000000;
    --footer-text:#f0f0ee;
    --footer-muted:#8a8a8a;
    --footer-rule:#2e2e2e;
  }
}

:root[data-theme="dark"]{
  --paper:#0f0f0f;
  --ink:#f0f0ee;
  --red:#ff3b21;
  --rule:#2e2e2e;
  --grey:#9a9a9a;
  --sand:#1a1a1a;
  --footer-bg:#000000;
  --footer-text:#f0f0ee;
  --footer-muted:#8a8a8a;
  --footer-rule:#2e2e2e;
}

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

html{-webkit-text-size-adjust:100%}

html,body{max-width:100%;overflow-x:clip}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

h1,h2,h3,p,li,blockquote{overflow-wrap:break-word}

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

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

/* ---------- Raster ---------------------------------------- */

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ---------- Utility-Typografie ---------------------------- */

.label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.2;
}

.num{font-variant-numeric:tabular-nums}

.edit{
  display:inline-block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
}

/* ---------- Kopf ------------------------------------------ */

.marker{height:6px;background:var(--red);grid-column:1 / 3}

.masthead{
  border-bottom:2px solid var(--ink);
  padding-top:20px;
  padding-bottom:14px;
  align-items:baseline;
}

.brand{grid-column:1 / 5}

.brand a{display:flex;align-items:center;gap:12px}

/* Schriftzug als Bild. Schwarz auf hellem Grund, im Dunkelmodus
   wird es umgekehrt, damit es weiss erscheint. */
.brand .logo{
  height:30px;
  width:auto;
  display:block;
}

.brand .logo-dark{display:none}

:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-light{display:none}
  :root:not([data-theme="light"]) .brand .logo-dark{display:block}
}


/* ---------- Hell und Dunkel ------------------------------- */

#modebtn{
  background:none;
  border:1px solid var(--ink);
  color:var(--ink);
  width:30px;
  height:30px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

#modebtn:hover{background:var(--ink);color:var(--paper)}

#modebtn svg{width:16px;height:16px;display:block}

.nav{grid-column:5 / 13;display:flex;justify-content:flex-end;align-items:center;gap:22px}

.nav ul{list-style:none;display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}

.nav a{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  display:inline-block;
}

.nav a:hover,.nav .active > a,.nav a.active{border-bottom-color:var(--red)}

.subhead{border-bottom:1px solid var(--rule);padding-top:10px;padding-bottom:10px}
.subhead .claim{grid-column:1 / 10;color:var(--grey);font-size:13px}
.subhead .stamp{grid-column:9 / 13;text-align:right;color:var(--grey);font-size:13px}

/* ---------- Aufmacher ------------------------------------- */

.lead{padding-top:56px;align-items:start}

.lead-text{grid-column:1 / 10}

.lead .kicker{color:var(--red);margin-bottom:20px;display:block}

.lead h1{
  font-size:clamp(38px,5.6vw,72px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.94;
  max-width:16ch;
  margin-left:-.04em;
}

.lead h1 a:hover{color:var(--red)}

.lead .teaser{margin-top:24px;font-size:19px;line-height:1.45;max-width:52ch;color:#333}

.lead .meta{margin-top:24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;color:var(--grey)}

.more{border-bottom:2px solid var(--red);padding-bottom:1px;color:var(--ink)}
.more:hover{background:var(--red);color:var(--paper)}

/* Signaturelement nach Mueller-Brockmann */
.manifest{
  grid-column:10 / 13;
  background:var(--red);
  color:#fff;
  padding:24px;
  aspect-ratio:1 / 1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.manifest p{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}

/* ---------- Beitragsliste --------------------------------- */

.archive{padding-top:72px}

.archive-head{
  grid-column:1 / 13;
  border-bottom:2px solid var(--ink);
  padding-bottom:8px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.archive-intro{grid-column:1 / 9;color:var(--grey);font-size:14px;padding-top:14px}

.entry{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  border-bottom:1px solid var(--rule);
  padding:28px 0;
}

.entry:hover{background:var(--sand)}

.entry .date{grid-column:1 / 3;color:var(--grey);font-size:13px;padding-top:6px}

.entry .body{grid-column:3 / 10}

.entry h2{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.entry h2 a:hover{color:var(--red)}

.entry .body p{margin-top:8px;color:#444;font-size:16px;max-width:60ch}

.entry .cat{grid-column:11 / 13;padding-top:8px}

/* HTMLy gibt Kategorien und Schlagworte als Links mit Komma dazwischen aus.
   font-size:0 blendet die Kommas aus, die Links bekommen ihre Groesse zurueck. */
.taxlinks{font-size:0}

.taxlinks a{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-block;
}

.lead .kicker.taxlinks a,.head .kicker.taxlinks a,.entry .cat.taxlinks a{color:var(--red)}
.lead .kicker.taxlinks a:hover,.head .kicker.taxlinks a:hover,.entry .cat.taxlinks a:hover{border-bottom:2px solid var(--red)}

/* ---------- Blaetterfunktion ------------------------------ */

.pager{
  grid-column:1 / 13;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:32px 0 0;
}

.pager ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.pager a,.pager span.current{
  border:1px solid var(--ink);
  padding:9px 16px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-block;
}

.pager a:hover,.pager .active > a,.pager span.current{background:var(--ink);color:var(--paper)}

.pager .disabled a,.pager .disabled span{border-color:var(--rule);color:var(--grey)}

.pager .pos{color:var(--grey);font-size:13px}

/* ---------- Titelblock Einzelseite ------------------------ */

.head{padding-top:56px}
.head .inner{grid-column:1 / 10}
.head .kicker{color:var(--red);display:block;margin-bottom:20px}

.head h1{
  font-size:clamp(36px,5.2vw,62px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.96;
  max-width:16ch;
  margin-left:-.04em;
}

.byline{
  grid-column:1 / 13;
  margin-top:40px;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
  padding:10px 0;
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  color:var(--grey);
  font-size:13px;
}

.byline b,.byline a{color:var(--ink);font-weight:700}
.byline a:hover{color:var(--red)}

/* ---------- Textkoerper ----------------------------------- */

.article{padding-top:48px}

.prose{grid-column:3 / 11;max-width:68ch;font-size:18px;line-height:1.68}
.rail{grid-column:1 / 3}

.rail .note{
  border-top:2px solid var(--red);
  padding-top:8px;
  color:var(--grey);
  font-size:12px;
  line-height:1.4;
  position:sticky;
  top:32px;
}

.prose p{margin-bottom:28px}

/* Erster Absatz wie alle anderen. Kein Vorspann. */

.prose h2{
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:56px 0 20px;
  padding-top:16px;
  border-top:1px solid var(--rule);
}

.prose h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:32px 0 12px}

.prose blockquote{
  border-left:6px solid var(--red);
  padding-left:24px;
  margin:40px 0;
  font-size:22px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.01em;
}

.prose ul,.prose ol{margin:0 0 28px 22px}
.prose li{margin-bottom:10px}

.prose pre{
  background:var(--sand);
  border-left:6px solid var(--ink);
  padding:18px 20px;
  overflow-x:auto;
  margin-bottom:24px;
}

.prose pre code{font-family:var(--mono);font-size:14px;line-height:1.6}
.prose code{font-family:var(--mono);font-size:15px;background:var(--sand);padding:1px 4px}
.prose pre code{background:none;padding:0}

.prose a{border-bottom:2px solid var(--red)}
.prose a:hover{background:var(--red);color:#fff}

.prose figure{margin:36px 0}
.prose figcaption{margin-top:8px;font-size:12px;color:var(--grey);border-top:1px solid var(--rule);padding-top:6px}

.prose table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left}
.prose th{border-bottom:2px solid var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.prose hr{border:0;border-top:2px solid var(--ink);margin:40px 0}

/* ---------- Schlagworte ----------------------------------- */

.taxonomy{grid-column:3 / 11;margin-top:56px}

.taxonomy .lbl{color:var(--grey);display:block;margin-bottom:10px}

.taxonomy .taxlinks a{
  border:1px solid var(--ink);
  padding:6px 12px;
  margin:0 6px 6px 0;
  color:var(--ink);
}

.taxonomy .taxlinks a:hover{background:var(--ink);color:var(--paper)}

/* ---------- Verwandte Beitraege --------------------------- */

.related{padding-top:80px}

.related .hd{grid-column:1 / 13;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:24px}

.related .list{grid-column:1 / 13}

.related ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

.related li{border-top:1px solid var(--rule);padding-top:12px}

.related li a{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;display:block}
.related li a:hover{color:var(--red)}

/* ---------- Blaettern zwischen Beitraegen ----------------- */

.postnav{padding-top:64px}

.postnav a{grid-column:span 6;border-top:2px solid var(--ink);padding:16px 0 0;display:block}
.postnav a.right{text-align:right;grid-column:7 / 13}

.postnav .dir{color:var(--red);display:block;margin-bottom:6px}
.postnav .t{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.postnav a:hover .t{color:var(--red)}

/* ---------- Meldungen ------------------------------------- */

.message{padding-top:96px}
.message .inner{grid-column:1 / 10}

.message .code{color:var(--red);display:block;margin-bottom:20px}

.message h1{
  font-size:clamp(38px,5.6vw,68px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.96;
  margin-left:-.04em;
}

.message p{margin-top:20px;font-size:19px;max-width:52ch;color:#333}

.message .back{
  display:inline-block;
  margin-top:28px;
  border:1px solid var(--ink);
  padding:10px 18px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.message .back:hover{background:var(--ink);color:var(--paper)}


/* ---------- Schlagwortübersicht ---------------------------- */

.taglist{margin-top:32px}

.taglist ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.taglist a{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  border:1px solid var(--ink);
  padding:7px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.taglist a:hover{background:var(--ink);color:var(--paper)}

.taglist .n{
  color:var(--red);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.taglist a:hover .n{color:var(--paper)}

/* ---------- Fuss ------------------------------------------ */

.site-footer{background:var(--footer-bg);color:var(--footer-text);margin-top:96px;padding:56px 0 32px}

.site-footer .col{grid-column:span 4}
.site-footer h3{color:var(--red);margin-bottom:14px}
.site-footer ul{list-style:none;font-size:14px;line-height:2}
.site-footer ul ul{margin-left:14px;font-size:13px}
.site-footer li{list-style:none}
.site-footer a:hover{color:var(--red)}

.site-footer .colophon{
  grid-column:1 / 13;
  border-top:1px solid var(--footer-rule);
  margin-top:40px;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:var(--footer-muted);
  font-size:12px;
}

.site-footer .colophon a{color:var(--footer-muted)}

/* ---------- Kleine Bildschirme ---------------------------- */


@media (max-width:900px){
  :root{--pad:26px;--gap:16px}

  .grid{grid-template-columns:repeat(6,1fr)}

  .marker{grid-column:1 / 2}
  .brand{grid-column:1 / 7}
  .nav{grid-column:1 / 7;justify-content:flex-start;margin-top:14px}
  .nav ul{justify-content:flex-start;gap:18px}

  .subhead .claim{grid-column:1 / 7}
  .subhead .stamp{display:none}

  .lead-text{grid-column:1 / 7}
  .manifest{grid-column:1 / 7;aspect-ratio:auto;margin-top:40px}

  .archive-head,.archive-intro,.entry,.pager{grid-column:1 / 7}
  .entry{display:block}
  .entry .date{padding:0 0 6px}
  .entry .cat{padding-top:10px}

  .postnav{flex-direction:column;gap:0}

  .related .hd,.related .list{grid-column:1 / 7}
  .related ul{grid-template-columns:1fr}

  .postnav a.right{text-align:left;margin-top:24px}

  .message .inner{grid-column:1 / 7}

  .site-footer .col{grid-column:span 3}
  .site-footer .colophon{grid-column:1 / 7;flex-direction:column;gap:6px}

  /* Negative Randkorrektur nur am Desktop sinnvoll */
  .lead h1,.head h1,.message h1{margin-left:0}

  /* Tabellen im Beitrag einzeln scrollbar statt die Seite verbreitern */
  .prose table{display:block;overflow-x:auto;white-space:nowrap}

}

@media (max-width:560px){
  :root{--pad:26px;--gap:12px}

  body{font-size:16px}

  .brand .logo{height:25px}

  .nav ul{gap:14px}
  .nav a{font-size:10px;letter-spacing:.12em}

  .lead{padding-top:36px}
  .lead h1{font-size:32px;line-height:1;max-width:none;hyphens:auto}
  .lead .teaser{font-size:17px;margin-top:18px}
  .lead .meta{gap:14px;margin-top:18px}

  .manifest{padding:20px;margin-top:32px}
  .manifest p{font-size:17px}

  .archive{padding-top:48px}
  .entry{padding:22px 0}
  .entry h2{font-size:21px}
  .entry .body p{font-size:15px}

  .head{padding-top:36px}
  .head h1{font-size:30px;hyphens:auto}
  .byline{gap:14px 20px;margin-top:28px}

  .article{padding-top:32px}
  .prose,
  .lead .teaser,
  .entry .body p,
  .archive-intro{
    hyphens:auto;
    -webkit-hyphens:auto;
    text-align:left;
  }

  .prose{font-size:17px;line-height:1.62}
  .prose p{margin-bottom:24px}
  .prose h2{font-size:21px;margin:36px 0 14px}
  .prose blockquote{font-size:19px;padding-left:14px;border-left-width:4px}
  .prose pre{padding:14px;max-width:100%}
  .prose pre code{font-size:13px}

  .related{padding-top:56px}
  .postnav{padding-top:48px}
  .postnav .t{font-size:17px}

  .message{padding-top:56px}
  .message h1{font-size:32px;hyphens:auto}

  .site-footer{margin-top:64px;padding:40px 0 24px}
  .site-footer .col{grid-column:1 / 7;margin-bottom:20px}

}

@media (prefers-reduced-motion:no-preference){
  .entry,.more,.nav a,.prose a,.taxonomy a,.pager a,.postnav .t{
    transition:background .12s linear,color .12s linear,border-color .12s linear;
  }
}

/* ---------- Druck ----------------------------------------- */

@media print{
  .nav,.site-footer,.postnav,.related,.manifest{display:none}
  body{font-size:11pt}
  .prose{grid-column:1 / 13;max-width:none}
}

/* ============================================================
   EINE SPALTE
   Kopf, Liste, Text und Fuss teilen dasselbe Mass.
   Breite ueber --max steuern, alles andere richtet sich danach.
   ============================================================ */

:root{--max:760px}

.grid{
  display:block;
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.head,.article,.related,.postnav{
  max-width:var(--max);
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* Kopf */
.marker{width:120px}

.masthead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.subhead{padding-top:12px;padding-bottom:12px}

/* Aufmacher */
.lead{padding-top:48px}
.lead h1{font-size:clamp(34px,5vw,46px);max-width:none;line-height:1.02}
.lead .teaser{font-size:18px;max-width:none}

/* Liste: Datum und Kategorie in einer Zeile ueber dem Titel */
.entry{display:block;padding-top:26px;padding-bottom:26px}
.entry:hover{background:none}

.entry .line{
  display:flex;
  gap:14px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-bottom:6px;
  color:var(--grey);
  font-size:13px;
}

.entry .line .date{padding:0}
.entry .cat{padding:0}

.entry h2{font-size:24px}
.entry .body p{max-width:none}

/* Beitrag */
.head h1{font-size:clamp(32px,4.6vw,42px);max-width:none}
.prose{max-width:none}

/* Fuss */
.site-footer .grid{display:flex;gap:40px;flex-wrap:wrap}
.site-footer .col{flex:1 1 150px}
.site-footer .colophon{flex:1 1 100%}

@media (max-width:560px){
  .site-footer .grid{display:block}
  .site-footer .col{margin-bottom:20px}
  .entry .line{gap:8px}
}

/* ============================================================
   LINIEN AUF TEXTBREITE
   Kopf und Unterzeile tragen ihre Linie bisher am Kasten selbst,
   dadurch laeuft sie um --pad ueber den Text hinaus. Die Linie
   wird jetzt als eingerueckte Ebene gezeichnet und endet dort,
   wo auch der Text endet.
   ============================================================ */

.masthead{border-bottom:0;position:relative}

.masthead::after{
  content:"";
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:0;
  height:2px;
  background:var(--ink);
}

.subhead{border-bottom:0;position:relative}

.subhead::after{
  content:"";
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:0;
  height:1px;
  background:var(--rule);
}

/* ============================================================
   NACH OBEN
   Erscheint erst nach 400px Scrollweg, damit auf kurzen Seiten
   nichts im Weg steht.
   ============================================================ */

#totop{
  position:fixed;
  right:24px;
  bottom:24px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--ink);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s linear;
  z-index:50;
}

#totop.on{opacity:1;visibility:visible}

#totop:hover{background:var(--ink);color:var(--paper)}

#totop svg{width:16px;height:16px;display:block}

@media (max-width:560px){
  #totop{right:14px;bottom:14px;width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  #totop{transition:none}
}

@media print{
  #totop{display:none}
}

/* ============================================================
   MANIFEST IN EINER SPALTE
   Der Block stammt aus dem zwoelfspaltigen Entwurf und war dort
   ein Quadrat rechts oben. In der Spaltenfassung sitzt er als
   ruhiger Abschluss unter der Beitragsliste, auf Textbreite.
   ============================================================ */

.manifest-wrap{margin-top:72px}

.manifest{
  grid-column:auto;
  display:block;
  aspect-ratio:auto;
  background:var(--ink);
  color:var(--paper);
  padding:38px 34px;
}

.manifest .lbl{
  display:block;
  color:var(--red);
  margin-bottom:18px;
}

.manifest p{
  font-size:clamp(21px,3vw,28px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.24;
  max-width:26ch;
}

.manifest b{color:var(--red);font-weight:700}

@media (max-width:560px){
  .manifest-wrap{margin-top:48px}
  .manifest{padding:26px 22px}
  .manifest p{font-size:20px}
}

/* ============================================================
   ARCHIVSEITE
   Eine Zeile je Beitrag: Datum links, Titel rechts, Jahre als
   Blockueberschrift. Bewusst ohne Bilder und ohne Teaser, die
   Seite dient der Uebersicht, nicht dem Stoebern.
   ============================================================ */

.archivliste{padding-top:40px}

.archivliste .jahr{margin-bottom:44px}

.archivliste .jahr h2{
  border-top:2px solid var(--ink);
  padding-top:8px;
  margin-bottom:4px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.archivliste .jahr h2 .anzahl{color:var(--grey);font-weight:400;letter-spacing:0}

.archivliste ul{list-style:none;margin:0;padding:0}

.archivliste li{border-bottom:1px solid var(--rule)}

.archivliste li a{
  display:flex;
  gap:16px;
  align-items:baseline;
  padding:13px 0;
}

.archivliste li a:hover .titel{color:var(--red)}

.archivliste .tag{
  flex:0 0 58px;
  color:var(--grey);
  font-size:13px;
}

.archivliste .titel{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
}

.archivliste .leer{color:var(--grey)}

.archivliste .monate{margin-top:24px}
.archivliste .monate ul{margin-top:10px}
.archivliste .monate li{border-bottom:1px solid var(--rule);padding:8px 0}

.archivtags{padding-top:8px;padding-bottom:8px}
.archivtags .label{display:block;border-top:2px solid var(--red);padding-top:8px;margin-bottom:14px}

.archive-intro-page{padding-top:32px}

@media (max-width:560px){
  .archivliste{padding-top:28px}
  .archivliste .jahr{margin-bottom:32px}
  .archivliste .tag{flex:0 0 48px;font-size:12px}
  .archivliste .titel{font-size:16px}
}

/* ============================================================
   FEHLERBEHEBUNG: TEXTFARBEN IM DUNKELMODUS
   Teaser und Listentexte standen auf fest verdrahtetem #333 und
   #444. Im Dunkelmodus lag damit dunkelgrauer Text auf fast
   schwarzem Grund. Beide Werte laufen jetzt ueber eine Variable.
   ============================================================ */

:root{--soft:#333333}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--soft:#c6c6c3}
}

:root[data-theme="dark"]{--soft:#c6c6c3}

.lead .teaser,
.entry .body p,
.message p{color:var(--soft)}

/* ============================================================
   SPRUNGLINK
   Sichtbar nur bei Tastaturbedienung. Wer mit Tab einsteigt,
   ueberspringt damit Kopf und Menue.
   ============================================================ */

.skiplink{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--ink);
  color:var(--paper);
  padding:12px 18px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.skiplink:focus{left:0}

main:focus{outline:none}

/* ============================================================
   ARCHIV MIT MONATEN
   Das Jahr ist die laute Ebene, der Monat die leise. Sonst
   zerfaellt die Seite bei zehn Beitraegen im Monat in lauter
   gleich starke Ueberschriften.
   ============================================================ */

.archivliste .jahr{margin-bottom:56px}

.archivliste .jahr h2{
  border-top:2px solid var(--ink);
  padding-top:10px;
  margin-bottom:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
}

.archivliste .jahr h2 .anzahl{
  color:var(--grey);
  font-size:12px;
  font-weight:700;
}

.archivliste .monat{margin-top:26px}

.archivliste .monat h3{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--rule);
  padding-bottom:6px;
  margin-bottom:2px;
  font-size:12px;
  color:var(--grey);
}

.archivliste .monat h3 .anzahl{color:var(--grey);font-size:12px}

@media (max-width:560px){
  .archivliste .jahr{margin-bottom:40px}
  .archivliste .jahr h2{font-size:22px}
  .archivliste .monat{margin-top:20px}
}