/* Bausteine, die es nur auf der Freigabeseite und in der Zustellbarkeit gibt.
   Farben und Abstände kommen aus stil.css, hier steht nichts Eigenes an Farbe. */

.abschnittstitel {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  border-bottom: 1px solid var(--linie); padding-bottom: 8px; margin-bottom: 12px;
}

/* Die Mailvorschau. Bewusst wie ein Postfach gebaut, damit man sie nicht mit einem
   Eingabefeld verwechselt: was hier steht, ist keine Vorlage mehr. */
.postfachrahmen {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); overflow: hidden;
}
.postfachkopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--linie);
}
.postfachkopf .absender { display: flex; align-items: center; gap: 10px; }
.postfachkopf .punkt {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--akzent-weich); color: var(--akzent);
  display: grid; place-items: center; font-weight: 650; font-size: 13px;
}
.postfachkopf b { display: block; font-size: 13.5px; }
.postfachkopf .mono { font-size: 12px; }
.postfachkopf .wann { margin-left: auto; font-size: 12.5px; }

.betreffzeile {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 18px 4px;
}
.betreffzeile b { font-size: 15px; letter-spacing: -.01em; }
.betreffzeile .etikett {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinte-3);
}
.betreffzeile .leise { margin-left: auto; font-size: 12px; }
.empfaengerzeile { padding: 0 18px 14px; font-size: 12.5px; }

.mailkoerper {
  padding: 4px 18px 16px; border-top: 1px solid var(--linie);
  padding-top: 16px; font-size: 14px; line-height: 1.62;
}
.mailkoerper p { margin: 0 0 14px; }
.mailkoerper p:last-child { margin-bottom: 0; }
.mailkoerper a { color: var(--akzent); }
.mailkoerper .anrede { font-weight: 500; }

.signaturblock {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 18px; padding: 14px 0; border-top: 1px solid var(--linie);
}
.signaturblock .sigbild {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--flaeche-2); color: var(--tinte-3);
  display: grid; place-items: center; font-size: 12px; font-weight: 650;
}
.signaturblock b { display: block; font-size: 13px; }
.signaturblock span { display: block; font-size: 12.5px; }

.anhangzeile {
  display: flex; align-items: center; gap: 9px;
  margin: 0 18px; padding: 11px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche-2); font-size: 12.5px;
}
.anhangzeile .clip { color: var(--tinte-3); }
.anhangzeile .leise { margin-left: auto; }
.fusszeile { padding: 14px 18px 16px; font-size: 12px; }

/* Prüfliste. Der Punkt links ist der Zustand, nicht Schmuck. */
.pruefliste { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.pruefzeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 13px; border-bottom: 1px solid var(--linie); font-size: 13px;
}
.pruefzeile:last-child { border-bottom: 0; }
.pruefzeile .stand {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.pruefzeile .stand.ja   { background: var(--ja-weich);   color: var(--ja); }
.pruefzeile .stand.nein { background: var(--nein-weich); color: var(--nein); }
.pruefzeile .stand.warn { background: var(--warn-weich); color: var(--warn); }
.pruefzeile .was { flex: 1; }
.pruefzeile .warum { display: block; color: var(--tinte-3); font-size: 12px; margin-top: 1px; }

/* Verteilung der Einstiegssätze, mit der Zehn-Prozent-Linie. */
.verteilung {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); padding: 6px 16px 16px;
}
.balkenzeile { display: grid; grid-template-columns: 1fr 62px; gap: 14px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.balkenzeile:last-child { border-bottom: 0; }
.balkenzeile .text { font-size: 13px; color: var(--tinte-2); }
.balkenzeile .spur {
  position: relative; height: 8px; margin-top: 7px;
  background: var(--flaeche-2); border-radius: 99px; overflow: hidden;
}
.balkenzeile .fuell { height: 100%; background: var(--akzent); border-radius: 99px; }
.balkenzeile .fuell.drueber { background: var(--warn); }
.balkenzeile .zahl { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.balkenzeile .zahl.drueber { color: var(--warn); font-weight: 600; }
.balkenzeile .grenzstrich {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--tinte-3); opacity: .55;
}

/* Zustellbarkeit: Kennzahlen mit Ampelgrenzen und die Aufwärmkurve. */
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; }
.kennzahl { background: var(--flaeche); padding: 14px 16px; }
.kennzahl .wert { font-size: 22px; font-weight: 620; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.kennzahl .wert.gut { color: var(--ja); }
.kennzahl .wert.warn { color: var(--warn); }
.kennzahl .wert.schlecht { color: var(--nein); }
.kennzahl .name { font-size: 12.5px; color: var(--tinte-2); margin-top: 1px; }
.kennzahl .grenze { font-size: 11.5px; color: var(--tinte-3); margin-top: 6px; }

.aufwaermkurve {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  align-items: end; height: 190px; padding: 0 4px;
}
.aufwaermkurve .woche { display: grid; align-content: end; gap: 6px; text-align: center; }
.aufwaermkurve .saeule { background: var(--akzent-weich); border-radius: 5px 5px 0 0; position: relative; }
.aufwaermkurve .saeule .ist { position: absolute; inset: auto 0 0 0; background: var(--akzent);
  border-radius: 5px 5px 0 0; }
.aufwaermkurve .woche.kommend .saeule { background: var(--flaeche-2); }
.aufwaermkurve .beschriftung { font-size: 11.5px; color: var(--tinte-3); }
.aufwaermkurve .menge { font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--tinte-2); white-space: nowrap; }
.aufwaermkurve .woche.kommend .menge { color: var(--tinte-3); }

.seedliste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.seedfach {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); padding: 13px 14px;
}
.seedfach b { display: block; font-size: 13px; margin-bottom: 6px; }

@media (max-width: 900px) {
  .zweispaltig { grid-template-columns: 1fr; }
  .kennzahlen, .seedliste { grid-template-columns: repeat(2, 1fr); }
  .aufwaermkurve { grid-template-columns: repeat(4, 1fr); height: auto; }
}