/*
 * abocheck.at, Gestaltung.
 *
 * Richtung „Der Kontoauszug", gewählt am 01.08.2026 aus vier Entwürfen.
 * Die Bewertung steht in docs/entscheidungen/2026-08-01-gestaltung-startseite.md,
 * die vier Entwürfe liegen unverändert in entwuerfe/.
 *
 * Der Gedanke in einem Satz: Die Seite sieht aus wie ein Kontoauszug und ist
 * bewusst keiner. Deshalb trägt sie das Kopfband eines Auszugs, aber die Werte
 * darin lauten „Konto: keines", „Übertragen: 0 Byte", „Empfänger: niemand".
 * Das Versprechen der Seite steht damit in der Sprache der Sache selbst,
 * statt behauptet zu werden.
 *
 * Drei Regeln, die den Aufbau erklären:
 *
 * 1. Hier steht kein Farbwert. Alles kommt aus den Rollen in tokens.css.
 *    Wer eine Ausnahme braucht, legt dort eine Rolle an.
 * 2. Es gibt genau eine Kartenform auf der ganzen Seite, den Beleg. Alles
 *    andere wird von Haarlinien getragen. Keine Kachelreihen, keine zweite
 *    erhobene Fläche, kein zweiter Linientyp.
 * 3. Zahlen stehen in Monospace mit Tabellenziffern und rechtsbündig. Dadurch
 *    liegen die Nachkommastellen über alle Zeilen hinweg exakt untereinander.
 */

/* ============================================================
   GRUNDLAGEN
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

/* Listen sind hier standardmäßig Struktur, nicht Aufzählung. Im Fließtext
   holt `.fliess` die Aufzählung zurück, siehe unten. */
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

img,
svg {
  max-width: 100%;
}

/* Ohne sichtbaren Fokus ist die Seite mit der Tastatur unbedienbar. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Auf der gesättigten Fläche wäre der Kobaltring unsichtbar. */
.abschluss :focus-visible {
  outline-color: var(--fokus-hell);
}

/* Das Sprungziel bekommt den Fokus, damit die Tastatur wirklich mitwandert.
   Ein Rahmen um den gesamten Inhalt wäre dabei aber unsinnig. */
[tabindex='-1']:focus {
  outline: none;
}

.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

@media (max-width: 600px) {
  .wrap {
    width: min(100% - 1.75rem, var(--breite));
  }
}

/* Schmaler Satzspiegel für durchlaufenden Text. */
.wrap-text {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
}

@media (max-width: 600px) {
  .wrap-text {
    width: min(100% - 1.75rem, 46rem);
  }
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  background: var(--marke);
  color: var(--auf-marke);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-klein);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: top 0.15s ease;
}

.sprung:focus {
  top: 1rem;
}

/* Das Etikett ist die Beschreibungsspalte des Auszugs. Es hält Beleg,
   Abschnitte und Listen zusammen und ist das einzige Versalelement. */
.etikett {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-leise);
  font-weight: 500;
}

.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================
   KOPF
   ============================================================ */

.kopf {
  border-bottom: 1px solid var(--buchungslinie);
  background: var(--papier);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  padding: 0.4rem 0;
  min-height: 44px;
}

.marke svg {
  display: block;
  flex: none;
}

.marke b {
  font-weight: 650;
}

.marke span {
  color: var(--text-leise);
  font-weight: 450;
}

.nav {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  text-decoration: none;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--text);
}

.nav a[aria-current='page'] {
  font-weight: 560;
}

@media (max-width: 560px) {
  .kopf-innen {
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  .marke {
    font-size: 0.9375rem;
    gap: 0.45rem;
  }
  .marke svg {
    width: 26px;
    height: 26px;
  }
  .nav a {
    padding: 0 0.4rem;
    font-size: 0.8125rem;
  }
}

/* ============================================================
   AUFHÄNGER
   ============================================================ */

.aufhaenger {
  padding: clamp(2.25rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4rem);
}

/* Der Auftakt: Vorspann links, die beiden Store-Knoepfe rechts in dem Raum,
   der neben der Ueberschrift frei blieb (Martin, 05.09.2026). Unter 1000px
   ruecken die Knoepfe unter den Vorspann. */
.auftakt {
  display: grid;
  grid-template-columns: minmax(0, 56ch) auto;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.vorspann-block {
  max-width: 56ch;
}

.store-knoepfe {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.store-knoepfe-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.store-knoepfe a {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.store-knoepfe a:focus-visible {
  outline: 3px solid var(--marke);
  outline-offset: 3px;
}

.store-knoepfe img {
  display: block;
  height: 48px;
  width: auto;
}

/* Das Play-Badge traegt seinen Rand als Teil der Grafik, deshalb etwas hoeher,
   damit die sichtbaren Flaechen gleich hoch wirken. */
.store-knoepfe img[src*="google-play"] {
  height: 52px;
}

@media (max-width: 1000px) {
  .auftakt {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.aufhaenger .etikett {
  margin-bottom: 1.15rem;
  color: var(--marke);
}

h1 {
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 660;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.vorspann {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--text-leise);
  max-width: 52ch;
}

/* ============================================================
   DER BELEG
   ============================================================ */

.beleg {
  background: var(--beleg);
  border: 1px solid var(--buchungslinie);
  border-radius: var(--r-beleg);
  box-shadow:
    0 1px 0 rgb(var(--schatten) / 0.04),
    0 18px 44px -30px rgb(var(--schatten) / 0.38);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  overflow: hidden;
}

@media (max-width: 1000px) {
  .beleg {
    grid-template-columns: minmax(0, 1fr);
  }
}

.beleg-links {
  min-width: 0;
}

/* Das Kopfband: die Felder eines echten Auszugs, die Werte sind die Pointe. */
.band {
  border-bottom: 1px solid var(--buchungslinie);
  padding: 1rem 1.25rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--feld-grund);
}

.band-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2.1rem;
}

.band-feld {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.band-feld .wert {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.band-notiz {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--marke);
  max-width: 22ch;
  line-height: 1.45;
}

/* ---------- Buchungszeilen ---------- */

.zeilen {
  padding: 0.25rem 0 0;
}

.zeilen-kopf,
.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem 9.5rem 2.75rem;
  gap: 0 1rem;
  border-bottom: 1px solid var(--buchungslinie);
}

.zeilen-kopf {
  padding: 0.7rem 1.25rem 0.55rem;
}

.zeilen-kopf span:nth-child(2),
.zeilen-kopf span:nth-child(3) {
  text-align: right;
}

.zeile {
  align-items: center;
  padding: 0.65rem 1.25rem;
  position: relative;
}

/* Die Marke, die an der zuletzt geänderten Zeile ausfährt. */
.zeile::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--marke);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.zeile.geaendert::before {
  transform: scaleY(1);
}

.feld-name {
  font: inherit;
  font-size: 1rem;
  font-weight: 520;
  letter-spacing: -0.012em;
  color: var(--text);
  background: transparent;
  border: 0;
  /* Der Unterstrich steht dauerhaft, nicht erst beim Überfahren: Ein
     Eingabefeld ohne erkennbare Begrenzung verfehlt WCAG 1.4.11. */
  border-bottom: 1px solid var(--feld-rand);
  padding: 0.3rem 0;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border-radius: 2px 2px 0 0;
}

.feld-name:hover {
  border-bottom-color: var(--marke);
}

.feld-name::placeholder {
  color: var(--text-leise);
  opacity: 0.75;
}

.rhythmus {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rhythmus select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-leise);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--feld-rand);
  padding: 0 1.15rem 0 0;
  min-height: 44px;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
}

.rhythmus::after {
  content: '';
  position: absolute;
  right: 0.3rem;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--text-leise);
  transform: translateY(-1px);
}

.rhythmus:hover select {
  color: var(--text);
  border-bottom-color: var(--marke);
}

.betrag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.betrag .waehrung {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.feld-betrag {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: right;
  width: 6.5rem;
  background: var(--feld-grund);
  border: 1px solid var(--feld-rand);
  border-radius: var(--r-klein);
  padding: 0.5rem 0.55rem;
  min-height: 44px;
}

.feld-betrag:hover {
  border-color: var(--marke);
}

.jahr {
  text-align: right;
  min-width: 0;
}

.jahr-zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--text-leise);
  display: block;
  letter-spacing: -0.01em;
  padding: 0.1rem 0.25rem;
  border-radius: 2px;
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}

.zeile.geaendert .jahr-zahl {
  background: var(--marke-blass);
  color: var(--marke);
  transition:
    background-color 0.05s ease,
    color 0.05s ease;
}

/* Der Anteilsbalken trägt keine Schrift, deshalb der gedämpfte Ton. */
.balken {
  display: block;
  margin-top: 0.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--buchungslinie);
  overflow: hidden;
}

.balken i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--marke-gedaempft);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.weg {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-klein);
  color: var(--text-leise);
  cursor: pointer;
  justify-self: end;
}

.weg:hover {
  border-color: var(--buchungslinie);
  color: var(--text);
  background: var(--feld-grund);
}

.weg svg {
  display: block;
}

/* Schmale Schirme: der Beleg klappt auf zwei Ebenen. Der Jahreswert wandert
   unter Name und Betrag und bekommt seine eigene Beschriftung, weil die
   Spaltenköpfe dort nicht mehr stehen. */
@media (max-width: 760px) {
  .zeilen-kopf {
    display: none;
  }
  .zeile {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-areas:
      'name betrag weg'
      'jahr jahr jahr';
    row-gap: 0.55rem;
    padding: 0.9rem 1rem;
  }
  .zeile > div:first-child {
    grid-area: name;
  }
  .betrag {
    grid-area: betrag;
  }
  .weg {
    grid-area: weg;
  }
  .jahr {
    grid-area: jahr;
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }
  .jahr::before {
    content: 'Im Jahr';
    order: 0;
    flex: none;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-leise);
  }
  .jahr .balken {
    order: 1;
    flex: 1 1 auto;
    margin-top: 0;
  }
  .jahr-zahl {
    order: 2;
    flex: none;
  }
  .feld-betrag {
    width: 5.75rem;
  }
  .band {
    padding: 0.9rem 1rem 0.8rem;
  }
  .band-felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    width: 100%;
  }
  .band-notiz {
    max-width: none;
  }
  .dazu {
    margin-left: 0.9rem;
  }
  .meldung {
    margin: 0 1rem 1rem;
  }
}

.leerstand {
  padding: 1.25rem;
  border-bottom: 1px solid var(--buchungslinie);
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.leerstand[hidden] {
  display: none;
}

.dazu {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin: 0.35rem 0.75rem 0.35rem 1.15rem;
  padding: 0 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--r-klein);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--marke);
  font-weight: 520;
  cursor: pointer;
}

.dazu:hover {
  background: var(--marke-blass);
}

.dazu .plus {
  font-family: var(--mono);
  font-size: 1.0625rem;
  line-height: 1;
}

/* Rückmeldung nach dem Entfernen. Grün steht hier für einen Zustand, nämlich
   für Geld, das ab jetzt nicht mehr abgeht. Es ist kein Schmuck. */
.meldung {
  margin: 0 1.25rem 1rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--gut-blass);
  border-left: 2px solid var(--gut);
  padding: 0.6rem 0.85rem;
  font-size: 0.9375rem;
  color: var(--gut);
  border-radius: 0 var(--r-klein) var(--r-klein) 0;
}

.meldung.an {
  display: flex;
}

.meldung strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.meldung button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  background: transparent;
  border: 1px solid var(--gut);
  color: var(--gut);
  border-radius: var(--r-klein);
  min-height: 44px;
  padding: 0 0.9rem;
  cursor: pointer;
}

.meldung button:hover {
  background: color-mix(in srgb, var(--gut) 12%, transparent);
}

/* ---------- Der Abschluss ---------- */

.abschluss {
  background: var(--abschluss-grund);
  color: var(--abschluss-text);
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--buchungslinie);
}

@media (max-width: 1000px) {
  .abschluss {
    border-left: 0;
    border-top: 1px solid var(--buchungslinie);
  }
}

.abschluss-siegel {
  position: absolute;
  right: -4.5rem;
  bottom: -4.75rem;
  width: 16rem;
  height: 16rem;
  pointer-events: none;
  color: var(--abschluss-siegel);
  z-index: 0;
}

.abschluss-siegel svg {
  width: 100%;
  height: 100%;
  display: block;
}

.abschluss > *:not(.abschluss-siegel):not(.nur-sr) {
  position: relative;
  z-index: 1;
}

.abschluss .etikett {
  color: var(--abschluss-leise);
}

/* Die Summe ist das größte Element der Seite. Der Sprung von der 15-px-Zeile
   zur Summe ist das Argument: so klein ist der einzelne Betrag, so groß ist,
   was daraus wird. */
.summe {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: clamp(2.9rem, 7.2vw, 4.35rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: 0.65rem 0 0.5rem;
  display: block;
  word-break: keep-all;
}

.summe .zeichen {
  display: inline-block;
  will-change: transform;
}

@keyframes walzen {
  from {
    transform: translateY(-0.3em);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.summe .zeichen.walzt {
  animation: walzen 0.38s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}

.summe-fuss {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--abschluss-leise);
  letter-spacing: -0.01em;
}

.abschluss hr {
  border: 0;
  border-top: 1px solid var(--abschluss-linie);
  margin: 1.15rem 0 1rem;
}

.abschluss-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--abschluss-leise);
  padding: 0.2rem 0;
}

.abschluss-zeile b {
  color: var(--abschluss-text);
  font-weight: 600;
}

.abschluss-fein {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--abschluss-leise);
  max-width: 30ch;
}

/* ============================================================
   KNÖPFE UND VERWEISE
   ============================================================ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border-radius: var(--r-klein);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 580;
  font-size: 1rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  background: var(--marke);
  color: var(--auf-marke);
  width: 100%;
}

.knopf:hover {
  background: color-mix(in srgb, var(--marke) 86%, var(--text));
}

.abschluss .knopf {
  background: var(--knopf-grund);
  color: var(--knopf-text);
  margin-top: 1.35rem;
}

.abschluss .knopf:hover {
  background: color-mix(in srgb, var(--knopf-grund) 88%, var(--abschluss-grund));
}

.knopf-fuer-sich {
  width: auto;
  margin-top: 1.5rem;
}

/* Zwei Store-Knoepfe untereinander, seit Android live ist (04.09.2026). */
.rand .knopf + .knopf,
.abschluss .knopf + .knopf {
  margin-top: 0.6rem;
}

.textlink {
  color: var(--marke);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--marke) 40%, transparent);
  padding-bottom: 1px;
}

.textlink:hover {
  border-bottom-color: var(--marke);
}

.unterm-beleg {
  margin-top: 1.15rem;
  display: flex;
  gap: 0.5rem 1.75rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--text-leise);
}

.unterm-beleg a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   BUCHUNGSTEXT: die ruhigen Abschnitte
   ============================================================ */

.block {
  border-top: 1px solid var(--buchungslinie);
  padding: clamp(2.5rem, 6vw, 4.25rem) 0 clamp(2.25rem, 5vw, 3.5rem);
}

/* Der Satz: links die Monospace-Beschreibungsspalte, in der Mitte der Text,
   rechts die Randspur. Das ist dieselbe Aufteilung wie im Beleg und der Grund,
   warum die Seite unterhalb des Aufhängers nicht in ein anderes
   Gestaltungssystem kippt.

   Die Randspur ist mit 22.5rem exakt so breit wie der Abschlussblock des
   Belegs. Dadurch hat die Seite von oben bis unten eine rechte Kante, und die
   Knöpfe der Abschnitte stehen senkrecht unter dem Knopf im Beleg. Ohne sie
   endete der Inhalt bei 1440 px in einer schmalen linken Spalte und die rechte
   Bildschirmhälfte blieb leer.

   Das eine Pixel Innenabstand rechts ist kein Schlampigkeitsrest: Der Beleg
   ist umrandet, seine Abschlussspalte endet deshalb um genau diese Randstärke
   weiter links als der Seitenrand. Ohne die Korrektur läge die Kante um ein
   Pixel daneben, und die ganze Behauptung dieser Spur wäre unwahr. */
.satz {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 22.5rem;
  column-gap: 3rem;
  row-gap: 1.9rem;
  align-items: start;
  padding-right: 1px;
}

/* Das Etikett begleitet seinen Abschnitt, statt einmal aufzublitzen. */
.satz > .etikett {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 1.5rem;
}

.satz > .worte {
  grid-column: 2;
  grid-row: 1;
}

.satz > .rand {
  grid-column: 3;
  grid-row: 1;
}

/* Die Liste bricht aus der Satzspur aus und läuft bis zur rechten Kante durch.
   Sie ist damit wieder eine Buchungszeile im Format des Belegs. */
.satz > .liste {
  grid-column: 2 / 4;
  grid-row: 2;
}

/* Eine Schlusszeile unter der Liste, auf derselben Breite wie diese. */
.satz > .satz-fuss {
  grid-column: 2 / 4;
  grid-row: 3;
}

/* Abschnitte ohne Randspur, der Satz nimmt dann beide Spuren. */
.satz-breit > .worte {
  grid-column: 2 / 4;
}

.satz + .satz {
  margin-top: 2.25rem;
}

/* Erste Stufe: die Randspur fällt unter die Liste, nicht davor. Sonst stünde
   im App-Abschnitt der Knopf vor den Punkten, die er zusammenfasst. */
@media (max-width: 1080px) {
  .satz {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    row-gap: 1.6rem;
  }
  .satz > .etikett {
    grid-row: 1 / span 3;
  }
  .satz > .liste,
  .satz-breit > .worte {
    grid-column: 2;
  }
  .satz > .liste {
    grid-row: 2;
  }
  .satz > .rand {
    grid-column: 2;
    grid-row: 3;
  }
  /* Wo die Randspur den Satz belegt statt ihn fortzusetzen, gehört sie
     unmittelbar an ihn, nicht ans Ende des Abschnitts. */
  .rand-vor-liste > .rand {
    grid-row: 2;
  }
  .rand-vor-liste > .liste {
    grid-row: 3;
  }
  .satz > .satz-fuss {
    grid-column: 2;
    grid-row: 4;
  }
}

/* Zweite Stufe: alles untereinander, in der Reihenfolge Satz, Liste, Rand. */
@media (max-width: 820px) {
  .satz {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.4rem;
  }
  .satz > .etikett,
  .satz > .worte,
  .satz > .rand,
  .satz > .liste,
  .satz-breit > .worte {
    grid-column: 1;
    grid-row: auto;
  }
  .satz > .etikett {
    position: static;
    order: 0;
  }
  .satz > .worte {
    order: 1;
  }
  .satz > .liste {
    order: 2;
  }
  .satz > .rand {
    order: 3;
  }
  .rand-vor-liste > .rand {
    order: 2;
  }
  .rand-vor-liste > .liste {
    order: 3;
  }
  .satz > .satz-fuss {
    grid-column: 1;
    grid-row: auto;
    order: 4;
  }
  .satz + .satz {
    margin-top: 1.75rem;
  }
}

h2 {
  font-size: clamp(1.5rem, 3.1vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 640;
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}

.block p {
  color: var(--text-leise);
}

.block p + p {
  margin-top: 1rem;
}

.block .stark {
  color: var(--text);
}

/* Die Linienliste: Aspekte, App-Punkte, Ratgeber-Zeilen. */
.liste {
  margin-top: 1.9rem;
  border-top: 1px solid var(--buchungslinie);
}

/* Im Raster trägt die Zeilenlücke den Abstand, sonst steht er zweimal da. */
.satz > .liste {
  margin-top: 0;
}

.liste > li {
  border-bottom: 1px solid var(--buchungslinie);
}

.posten {
  display: grid;
  grid-template-columns: 12rem minmax(0, 54ch);
  gap: 0.25rem 3rem;
  padding: 1.05rem 0;
  align-items: baseline;
}

/* Nur wo die Liste über die volle Breite läuft, bekommt der Begriff die breite
   Spur. In den engeren Zusammenhängen (die Beiträge) stünde sonst eine 336
   Pixel breite Begriffsspalte neben 191 Pixel Erläuterung, und die Zeile läse
   sich verkehrt herum. Deshalb eine eigene Klasse und nicht die Lage im
   Raster: Die Übersicht der Beiträge braucht dieselbe breite Zeile, steht aber
   gar nicht in einem `.satz`. */
.liste-breit .posten {
  grid-template-columns: 21rem minmax(0, 1fr);
}

/* Schmal fällt alles auf eine Spur. Die zweite Auswahl steht daneben, weil sie
   sonst von der breiteren Regel für die durchlaufende Liste geschlagen würde. */
@media (max-width: 820px) {
  .posten,
  .liste-breit .posten {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

.posten .titel {
  font-weight: 580;
  letter-spacing: -0.015em;
}

.posten .text {
  color: var(--text-leise);
}

.liste a.posten {
  text-decoration: none;
  color: inherit;
  padding: 1.05rem 0.6rem;
  margin-inline: -0.6rem;
  transition: background-color 0.15s ease;
  min-height: 44px;
}

.liste a.posten:hover {
  background: var(--feld-grund);
}

/* Die Ratgeber-Zeile bekommt eine dritte, schmale Spur für den Pfeil an der
   rechten Kante. Die Liste liest sich dadurch als Verzeichnis. */
.liste a.posten {
  grid-template-columns: 12rem minmax(0, 1fr) 1.5rem;
}

.liste-breit a.posten {
  grid-template-columns: 21rem minmax(0, 1fr) 1.5rem;
}

.liste a.posten .titel {
  color: var(--text);
}

.liste a.posten:hover .titel {
  color: var(--marke);
}

.pfeil {
  font-family: var(--mono);
  color: var(--marke);
  font-size: 0.9375rem;
  justify-self: end;
}

/* Schmal: Titel und Pfeil in einer Zeile, die Beschreibung darunter. */
@media (max-width: 820px) {
  .liste a.posten,
  .liste-breit a.posten {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
  }
  .liste a.posten .titel {
    grid-column: 1;
    grid-row: 1;
  }
  .liste a.posten .pfeil {
    grid-column: 2;
    grid-row: 1;
  }
  .liste a.posten .text {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

.app-fein {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* Die Stufenmarke an den App-Funktionen.

   Sie muss dastehen, weil zwei der vier Punkte etwas kosten und eine Seite,
   die das verschweigt, mehr verspricht als die App hält. Sie ist bewusst
   leise gesetzt und nicht als Warnung: kein Rot, kein Bernstein, keine
   Ampelfarbe. Die Ampel gehört dem Zustand, und dass eine Funktion Geld
   kostet, ist kein Zustand. „gratis" trägt die Markenfarbe, weil es die
   gute Nachricht ist, „mit Plus" bleibt grau. */
.stufe {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-leise);
  white-space: nowrap;
}

.stufe-gratis {
  color: var(--marke);
}

.satz-fuss {
  margin-top: 1.1rem;
  max-width: 62ch;
}

.app-knopfzeile {
  margin-top: 1.5rem;
}

.app-knopfzeile .knopf {
  width: auto;
}

/* ---------- Die Randspur ---------- */

.rand {
  display: grid;
  gap: 1.75rem;
  align-content: start;
}

.rand > * {
  min-width: 0;
}

.rand .knopf {
  width: 100%;
}

/* ============================================================
   DAS MONATSRASTER IN KAPITEL 2
   ------------------------------------------------------------
   Uebernommen aus Entwurf D „Neun Tage" und in die Sprache des
   Kontoauszugs uebersetzt: duenne Linien statt Karte mit Schatten.

   Zwei Dinge sind hier anders als im Entwurf, und beide mit Grund:

   1. Die Positionen der neun Marken standen dort als style-Attribut
      am Element. Unsere Inhaltsrichtlinie erlaubt kein unsafe-inline,
      der Browser haette sie verworfen und alle neun laegen uebereinander.
      Sie stehen deshalb hier als .a1 bis .a9.
   2. Der Umschalter ist ein Paar Radioknoepfe. Kein Skript, keine
      Zustandsverwaltung, und er funktioniert mit der Tastatur.
   ============================================================ */

/* Die Tafel liegt in Kapitel 2 ueber Text- und Randspur. Weil damit eine
   Zeile dazukommt, muss das Etikett eine Zeile weiter spannen, sonst endet
   seine Klebespur mitten im Kalender statt am Ende des Abschnitts. */
.satz.mit-tafel > .etikett { grid-row: 1 / span 3; }
.satz.mit-tafel > .tafel { grid-column: 2 / 4; grid-row: 2; }
.satz.mit-tafel > .liste { grid-row: 3; }
.satz.mit-tafel > .satz-fuss { grid-row: 4; }

.tafel {
  border: 1px solid var(--buchungslinie);
  border-radius: var(--r-beleg);
  background: var(--flaeche);
  padding: clamp(0.9rem, 2.2vw, 1.3rem);
}

.schalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--grund);
  border: 1px solid var(--buchungslinie);
  border-radius: var(--r-klein);
  padding: 2px;
}

.schalter label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.5rem;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-leise);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.schalter label:hover { color: var(--text); }

#ansicht-a:checked ~ .schalter label[for="ansicht-a"],
#ansicht-b:checked ~ .schalter label[for="ansicht-b"] {
  background: var(--marke);
  color: var(--auf-marke);
}

#ansicht-a:focus-visible ~ .schalter label[for="ansicht-a"],
#ansicht-b:focus-visible ~ .schalter label[for="ansicht-b"] {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* Zwei Klassen, weil `.block p` sonst gewinnt und das Etikett grau faerbt. */
.tafel .tafel-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 0.55rem;
}

.tafel .tafel-zeile p { margin: 0; }

.wochenkopf {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-leise);
  transition: opacity 0.45s ease;
}

.wochenkopf span { text-align: center; padding-bottom: 0.4rem; }

.feld { position: relative; }

.tage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  transition: opacity 0.45s ease;
}

.tag {
  aspect-ratio: 1 / 0.82;
  border: 1px solid var(--buchungslinie);
  margin: -0.5px;
  padding: 0.35rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-leise);
}

.tag.leer { background: var(--grund); }
.tag i { font-style: normal; }

/* Die neun Marken liegen in beiden Zustaenden absolut. Nur so laesst sich
   der Weg von der Kalendermarke zur Rechnungszeile ueberhaupt zeigen. */
.abbuchungen { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.abbuchung {
  position: absolute;
  left: calc(var(--c) * (100% / 7));
  top: calc(var(--r) * (100% / 5));
  width: calc(100% / 7);
  height: calc(100% / 5);
  padding: 2px;
  transition:
    left 0.55s cubic-bezier(0.66, 0, 0.2, 1),
    top 0.55s cubic-bezier(0.66, 0, 0.2, 1),
    width 0.55s cubic-bezier(0.66, 0, 0.2, 1),
    height 0.55s cubic-bezier(0.66, 0, 0.2, 1),
    padding 0.55s cubic-bezier(0.66, 0, 0.2, 1);
  transition-delay: calc(var(--i) * 26ms);
}

/* Spalte, Zeile und Reihenfolge je Marke. Im Entwurf stand das als
   style-Attribut, hier steht es an der einzigen richtigen Stelle. */
.a1 { --c: 2; --r: 0; --i: 0; }
.a2 { --c: 4; --r: 0; --i: 1; }
.a3 { --c: 0; --r: 1; --i: 2; }
.a4 { --c: 3; --r: 1; --i: 3; }
.a5 { --c: 6; --r: 1; --i: 4; }
.a6 { --c: 2; --r: 2; --i: 5; }
.a7 { --c: 0; --r: 3; --i: 6; }
.a8 { --c: 4; --r: 3; --i: 7; }
.a9 { --c: 6; --r: 3; --i: 8; }

.abbuchung-koerper {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: var(--marke);
  color: var(--auf-marke);
  transition:
    background-color 0.4s ease, color 0.4s ease,
    border-radius 0.4s ease, box-shadow 0.4s ease;
  transition-delay: calc(var(--i) * 26ms);
}

.m-tag, .m-name, .m-betrag {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
  transition:
    left 0.5s ease, right 0.5s ease, top 0.5s ease,
    transform 0.5s ease, max-width 0.5s ease,
    opacity 0.35s ease, color 0.4s ease, font-size 0.4s ease;
  transition-delay: calc(var(--i) * 26ms);
}

.m-tag {
  left: 0.42em;
  top: 0.5em;
  transform: translateY(0);
  font-family: var(--mono);
  font-size: 0.6875rem;
  opacity: 0.8;
}

.m-betrag {
  right: 0.4em;
  top: calc(100% - 1.9em);
  transform: translateY(0);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 1.55vw, 0.78rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.m-name {
  left: 3.4em;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(0.75rem, 2.4vw, 0.875rem);
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
}

/* Der zweite Zustand: aus neun Marken wird eine Rechnung. */
#ansicht-b:checked ~ .feld .tage { opacity: 0.22; }
#ansicht-b:checked ~ .wochenkopf { opacity: 0.25; }

#ansicht-b:checked ~ .feld .abbuchung {
  left: 0;
  top: calc(var(--i) * (100% / 9));
  width: 100%;
  height: calc(100% / 9);
  padding: 0;
}

#ansicht-b:checked ~ .feld .abbuchung-koerper {
  background: var(--flaeche);
  color: var(--text);
  border-radius: 0;
  box-shadow: inset 2px 0 0 0 var(--marke), 0 1px 0 0 var(--buchungslinie);
}

#ansicht-b:checked ~ .feld .m-tag {
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-leise);
  opacity: 1;
}

#ansicht-b:checked ~ .feld .m-name { opacity: 1; max-width: calc(100% - 10em); }

#ansicht-b:checked ~ .feld .m-betrag {
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(0.75rem, 2.4vw, 0.8125rem);
}

/* Unter 560 px ist eine Kalenderzelle rund 60 px breit. Tagesziffer und Betrag
   ueberlappen dort, gemessen auf 390 px. Der Betrag verschwindet deshalb aus
   der Marke, er steht zwei Zeilen darunter ohnehin noch einmal. In der
   Rechnungsansicht bleibt er, dort hat er die volle Breite. */
@media (max-width: 560px) {
  #ansicht-a:checked ~ .feld .m-betrag { opacity: 0; }
  .m-tag { top: 50%; transform: translateY(-50%); }
  #ansicht-b:checked ~ .feld .m-tag { top: 50%; }
}

/* Beide Lesarten liegen uebereinander, damit der Platz beim Umschalten
   nicht springt. Die laengere darf ihn dehnen. */
.bilanz {
  display: grid;
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--buchungslinie);
  min-height: clamp(8.2rem, 20vw, 9.8rem);
}

.bilanz-lage { grid-area: 1 / 1; align-self: start; transition: opacity 0.35s ease; }

.bilanz-a { color: var(--text-leise); font-size: 0.875rem; max-width: 34ch; }

.bilanz-a .streu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.bilanz-a .streu b { font-weight: 400; opacity: 0.55; }

.bilanz-b { opacity: 0; pointer-events: none; }
#ansicht-b:checked ~ .bilanz .bilanz-a { opacity: 0; pointer-events: none; }
#ansicht-b:checked ~ .bilanz .bilanz-b { opacity: 1; pointer-events: auto; }

/* Zwei Klassen, sonst schlaegt `.block p` die Markenfarbe wieder weg. */
.tafel .tafel-summe {
  font-size: clamp(2.75rem, 7vw, 3.75rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--marke);
  margin-top: 0.15rem;
}

.tafel .tafel-summe .waehrung {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: 0.12em;
}

.tafel .tafel-jahr {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.tafel .tafel-jahr b { color: var(--text); font-weight: 650; }

/* ============================================================
   DIE BILDSCHIRME IM ABSCHNITT „DIE APP"
   ------------------------------------------------------------
   Echte Aufnahmen vom iPhone, nicht nachgebaut. Sie zeigen einen
   Ausschnitt von oben statt des ganzen Geraets: Ein Telefonbild in
   voller Hoehe ist knapp 600 px hoch und wuerde den Abschnitt
   erschlagen. Oben steht ohnehin das, worum es geht.

   Nebeneinander, solange Platz ist. Wird es eng, laesst sich seitlich
   blaettern, und zwar mit dem, was der Browser dafuer mitbringt.
   Kein Skript, kein Zustand, keine Punkte zum Klicken.
   ============================================================ */

.satz.mit-schirmen > .etikett { grid-row: 1 / span 3; }
.satz.mit-schirmen > .schirme { grid-column: 2 / 4; grid-row: 2; }
.satz.mit-schirmen > .liste { grid-row: 3; }
.satz.mit-schirmen > .satz-fuss { grid-row: 4; }

/* Drei feste Spalten statt automatisch erzeugter: In einem Scroll-Container
   rechnet `1fr` bei automatischen Spalten gegen den Inhalt statt gegen die
   Breite, dadurch stand das dritte Bild halb draussen, obwohl Platz war. */
.schirme {
  display: grid;
  grid-template-columns: repeat(3, minmax(13.5rem, 1fr));
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
}

.schirm {
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
}

.schirm img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--buchungslinie);
  border-radius: var(--r-beleg);
  background: var(--grund);
}

.schirm figcaption {
  margin-top: 0.8rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* Die Preisleiter. Balken hatten hier gestanden, sie sind wieder weg: Drei
   Werte, die sich wie 83 zu 92 zu 100 verhalten, sehen als Balken gleich lang
   aus und behaupten damit das Gegenteil der Aussage. Die Ziffern selbst zeigen
   den Anstieg besser, wenn man sie untereinander stellt und den letzten Wert
   stehen lässt. */
.leiter {
  border-top: 1px solid var(--buchungslinie);
  padding-top: 0.9rem;
}

.leiter ul {
  margin-top: 0.7rem;
}

.leiter li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--buchungslinie);
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--text-leise);
}

.leiter li:last-child {
  border-bottom: 0;
  color: var(--marke);
  font-weight: 600;
}

.leiter .wann {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-left: auto;
}

.leiter figcaption {
  font-size: 0.875rem;
  color: var(--text-leise);
  margin-top: 0.8rem;
}

/* ---------- Der Blattfuß ---------- */

/* Ein Auszug wiederholt seine Kopfzeile am Blattende. Hier schließt sie die
   Klammer: Die Seite beginnt mit dem Versprechen und endet damit, bevor die
   Rechtsverweise kommen. Genau einmal, sonst wäre es eine Masche. */
.blattfuss {
  border-top: 1px solid var(--buchungslinie);
  padding: 1.5rem 0;
}

.blattfuss dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 3.5rem;
}

.blattfuss div {
  display: grid;
  gap: 0.15rem;
}

.blattfuss dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.blattfuss dd {
  font-family: var(--mono);
  font-size: 0.875rem;
}

/* ============================================================
   FLIESSTEXT: Ratgeber-Beiträge, Rechtstexte, Kontakt
   ============================================================

   `.fliess` holt zurück, was die Grundlagen oben absichtlich abgeräumt haben:
   Absatzabstände, Aufzählungszeichen, unterstrichene Verweise. Alles, was ein
   Mensch liest statt bedient, steht in diesem Bereich. */

.fliess {
  color: var(--text);
}

.fliess > * + * {
  margin-top: 1.15rem;
}

.fliess h2 {
  margin-top: 2.75rem;
  margin-bottom: 0;
}

.fliess h3 {
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Ein Absatz direkt nach einer Überschrift rückt näher heran als einer nach
   einem Absatz. Sonst hängt die Überschrift zwischen zwei gleichen Lücken. */
.fliess h2 + *,
.fliess h3 + * {
  margin-top: 0.7rem;
}

.fliess ul,
.fliess ol {
  padding-left: 1.35em;
  list-style: revert;
}

.fliess li + li {
  margin-top: 0.5rem;
}

.fliess a {
  color: var(--marke);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--marke) 45%, transparent);
}

.fliess a:hover {
  text-decoration-color: var(--marke);
}

/* Ein Knopf im Fließtext bleibt ein Knopf.

   Ohne diese Rücknahme schlägt `.fliess a` (Klasse plus Elementtyp) die Regel
   `.knopf` (nur Klasse). Die Schrift bekommt dann dieselbe Farbe wie die
   Fläche: Kobalt auf Kobalt, gemessen 1,00 zu 1. Auf zwei Beitragsseiten war
   die Beschriftung „Zur Rechenhilfe" dadurch unsichtbar, ein leeres blaues
   Rechteck. Die Rücknahme steht hier und nicht in den betroffenen Seiten,
   damit der Fehler beim nächsten Beitrag nicht zurückkommt. */
.fliess a.knopf {
  color: var(--auf-marke);
  text-decoration: none;
}

.fliess strong {
  font-weight: 620;
}

.fliess code {
  font-family: var(--mono);
  font-size: 0.9375em;
}

/* Der Beitrag: Kopf mit Etikett und Stand, dann der Satzspiegel. */
.beitrag {
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem);
}

.beitrag-kopf {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--buchungslinie);
}

.beitrag-kopf .etikett {
  color: var(--marke);
  margin-bottom: 1rem;
}

.beitrag-kopf .vorspann {
  margin-top: 1.15rem;
}

.stand {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

/* Der Musterbrief. Er trug seine Klasse, ohne dass es sie im Stylesheet gab,
   und stand deshalb als gewöhnlicher Fließtext mitten im Beitrag. Das ist
   ausgerechnet der eine Block, den der Besucher herauskopieren soll.

   Er bekommt einen Rahmen aus Haarlinien, keine Fläche und keinen Schatten.
   Die Regel „genau eine Kartenform" bleibt damit unangetastet: Der Beleg ist
   erhoben, dieser hier ist nur umrissen. */
.muster {
  margin-top: 1.75rem;
  border: 1px solid var(--buchungslinie);
  border-radius: var(--r-klein);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.muster .etikett {
  margin-bottom: 1.1rem;
}

/* Der wahlweise Satz im Muster. Er stand einmal in eckigen Klammern, und die
   Anleitung darüber sagt „Ersetz alles in eckigen Klammern durch deine
   Angaben". Wer das befolgt hat, verschickte einen Brief, in dem „[Optional:"
   stand. Die Kennzeichnung sitzt jetzt sichtbar außerhalb des Brieftextes. */
.muster-wahl .etikett {
  display: block;
  margin-bottom: 0.35rem;
}

/* Die Kennzeichnung unter den Figuren der Randspur. Sie muss dort stehen und
   nicht beim Beleg weiter oben: Eine Riesenziffer im Datenlook liest sich sonst
   als Erhebung, und eine Kennzeichnung, die zwei Bildschirmhöhen entfernt
   steht, ist keine. */
.block .rand-fein {
  font-size: 0.8125rem;
  color: var(--text-leise);
  border-top: 1px solid var(--buchungslinie);
  padding-top: 0.8rem;
}

/* Der Rechtshinweis. Bernstein steht hier für einen Zustand, nämlich für
   „das ist keine Rechtsberatung". Das ist die einzige Stelle im ganzen
   Stylesheet, an der Bernstein vorkommt. */
.rechtshinweis {
  margin-top: 2.5rem;
  background: var(--achtung-blass);
  border-left: 2px solid var(--achtung);
  border-radius: 0 var(--r-klein) var(--r-klein) 0;
  padding: 0.95rem 1.15rem;
  font-size: 0.9375rem;
  color: var(--text);
}

.rechtshinweis .etikett {
  color: var(--achtung);
  margin-bottom: 0.35rem;
}

/* Quellen stehen in der Beschreibungsspalte des Auszugs, wie alles Belegende. */
.quellen {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--buchungslinie);
  font-size: 0.9375rem;
}

/* Die Quellenlinks stehen je in einer eigenen Zeile und sind damit keine
   Verweise im Fließtext. Für sie greift die Ausnahme von der 44-Punkt-Regel
   nicht, und am Telefon tippt man sie mit dem Daumen. Der Innenabstand bringt
   sie über das Maß, ohne den Zeilenrhythmus zu zerreißen. Fließtextlinks
   bleiben bewusst unangetastet. */
.quellen li a {
  display: inline-block;
  padding-block: 13px;
}

.quellen .etikett {
  margin-bottom: 0.9rem;
}

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

.quellen li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--buchungslinie);
  color: var(--text-leise);
}

.quellen a {
  color: var(--marke);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--marke) 40%, transparent);
}

.quellen a:hover {
  border-bottom-color: var(--marke);
}

/* Weiterlesen am Fuß eines Beitrags. */
.weiter {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--buchungslinie);
}

.weiter .etikett {
  margin-bottom: 0.5rem;
}

/* ============================================================
   FUSS
   ============================================================ */

.fuss {
  border-top: 1px solid var(--buchungslinie);
  padding: 2.25rem 0 3rem;
  background: var(--feld-grund);
}

.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}

.fuss p {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--text-leise);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--text);
}

/* ============================================================
   BEWEGUNG
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}