/* =====================================================================
   ohr.saetzerei.com · die Publikation

   Eine Spalte, zum Hören und Lesen. Alle Farben und Masse kommen aus
   tokens.css; hier steht nur Anordnung. Die Seite ist für ein fremdes
   Publikum da, nicht für das Haus: kein Werkzeug, keine Leiste.
   ===================================================================== */

/* -- Kopf ---------------------------------------------------------------
   Die Marke ‹Ohr› steht klein über dem Titel der Reihe. Sie ist der
   Verlag, nicht der Inhalt. */
.marke {
  font-size: var(--grad-fein);
  color: var(--ink-faint);
  margin-bottom: var(--r4);
}
.marke a { color: inherit; text-decoration: none; font-weight: 600; letter-spacing: 0.04em; }
.marke a:hover { color: var(--ink); }
.marke .reihe { color: var(--ink-faint); }
.marke .reihe::before { content: '· '; }

/* -- Der Strom: die Folgen in ihrer Reihenfolge ------------------------- */
.staffel + .staffel { margin-top: var(--r12); }

.staffel > h2 {
  font-size: var(--grad-fein);
  font-weight: 400;
  color: var(--ink-faint);
  line-height: var(--zeile-eng);
  padding-bottom: var(--r2);
  border-bottom: var(--linie) solid var(--rule-soft);
  margin-bottom: var(--r6);
}

.folgen { list-style: none; margin: 0; padding: 0; }
.folgen li + li { margin-top: var(--r6); }

.folgen .nr {
  display: block;
  font-size: var(--grad-fein);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.folgen .nr .neu { color: var(--accent); }
.folgen h3 { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); margin: var(--r1) 0 0; }
.folgen h3 a { color: inherit; text-decoration: none; }
.folgen h3 a:hover { text-decoration: underline; }
.folgen .satz { color: var(--ink-soft); margin-top: var(--r1); max-width: var(--measure); }

.ausblick { margin-top: var(--r8); color: var(--ink-faint); font-size: var(--grad-fein); }

/* -- Eine Folge -------------------------------------------------------- */
.folge audio { display: block; width: 100%; margin: var(--r6) 0 var(--r2); }
.folge .lade { font-size: var(--grad-fein); color: var(--ink-faint); margin-bottom: var(--r8); }
.folge .lade a { color: inherit; }
.folge .text p { max-width: var(--measure); }
.folge .text p + p { margin-top: var(--r4); }
.folge .bald { color: var(--ink-soft); max-width: var(--measure); }

.nachbarn {
  display: flex;
  justify-content: space-between;
  gap: var(--r4);
  margin-top: var(--r12);
  font-size: var(--grad-fein);
}
.nachbarn:empty { display: none; }
.nachbarn a { color: var(--ink-soft); text-decoration: none; }
.nachbarn a:hover { color: var(--ink); text-decoration: underline; }
.nachbarn .weiter { margin-left: auto; text-align: right; }

/* -- Abonnieren --------------------------------------------------------
   Ein Feld, ein Knopf. Der zweite Eingabeort ist die Falle für Skripte:
   Menschen sehen ihn nicht, Formular-Roboter füllen ihn. */
.abo { margin-top: var(--r16); padding-top: var(--r8); border-top: var(--linie) solid var(--rule-soft); }
.abo h2 { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); }
.abo > p { color: var(--ink-soft); max-width: var(--measure); margin-top: var(--r2); }
.abo-form { margin-top: var(--r4); }
.abo-form label { display: block; font-size: var(--grad-fein); color: var(--ink-soft); margin-bottom: var(--r1); }
.abo-zeile { display: flex; flex-wrap: wrap; gap: var(--r2); }
.abo-zeile input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: var(--grad-klein);
  padding: var(--r2) var(--r3);
  border: var(--linie) solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--paper-hoch);
  color: var(--ink);
}
.abo-zeile input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.abo-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#abo-stand:empty { display: none; }
#abo-stand { margin-top: var(--r3); }
#abo-stand.gut { color: var(--ink); }
#abo-stand.fehler {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border-radius: var(--radius-s);
  padding: var(--r2) var(--r3);
  display: inline-block;
}

.ueber { margin-top: var(--r12); }
.ueber h2 { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); }
.ueber p { color: var(--ink-soft); max-width: var(--measure); margin-top: var(--r3); }