/* Ergänzungen zu Tailwind: nur was sich per Utility-Klasse schlecht ausdrücken lässt. */
.chart { width: 100%; height: 340px; }
.chart-tall { height: 420px; }

@media print {
  header, footer, .no-print { display: none !important; }
  body { background: #fff; }
}

/* Fließtext der Berichte von handball.net. Er kommt als HTML (h1..h4, p,
   Listen) und hat deshalb keine Utility-Klassen - die Abstände müssen hier
   stehen. Die Überschriften werden dabei heruntergestuft: Ein <h1> mitten
   auf der Seite wäre größer als die Seitenüberschrift darüber. */
.bericht > :first-child { margin-top: 0; }
.bericht > :last-child { margin-bottom: 0; }
.bericht h1, .bericht h2, .bericht h3, .bericht h4 {
  font-weight: 600;
  margin: 1.25em 0 .4em;
  line-height: 1.3;
}
.bericht h1 { font-size: 1.05rem; }
.bericht h2 { font-size: 1rem; }
.bericht h3, .bericht h4 { font-size: .95rem; }
.bericht p { margin: 0 0 .75em; line-height: 1.65; }
.bericht ul, .bericht ol { margin: 0 0 .75em 1.25em; }
.bericht li { margin: .2em 0; }
.bericht ul { list-style: disc; }
.bericht ol { list-style: decimal; }

/* Datenschutzerklärung. Derselbe Fall wie .bericht: Der Text kommt aus der
   Konfiguration und wird von richtext.render_langtext gesetzt, hat also
   keine Utility-Klassen. Zusätzlich zu .bericht braucht er Tabellen,
   vorformatierte Blöcke (die Anschrift des Verantwortlichen) und
   Zitatblöcke. */
.datenschutz { line-height: 1.7; }
.datenschutz > :first-child { margin-top: 0; }
.datenschutz > :last-child { margin-bottom: 0; }
.datenschutz h2, .datenschutz h3, .datenschutz h4 {
  font-weight: 600;
  margin: 1.75em 0 .5em;
  line-height: 1.3;
}
.datenschutz h2 { font-size: 1.15rem; }
.datenschutz h3 { font-size: 1.05rem; }
.datenschutz h4 { font-size: .95rem; }
.datenschutz p { margin: 0 0 .9em; }
.datenschutz ul { margin: 0 0 .9em 1.25em; list-style: disc; }
.datenschutz li { margin: .25em 0; }
.datenschutz hr { margin: 2em 0; border-top: 1px solid rgb(226 232 240); }
.datenschutz code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}
.datenschutz a { text-decoration: underline; }

/* Die Anschrift des Verantwortlichen. Zeilenumbrüche bleiben stehen; der
   Block darf schmaler als die Spalte sein, aber nicht überlaufen. */
.datenschutz pre {
  margin: 0 0 1.1em;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: rgb(248 250 252);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Interne Anmerkungen des Entwurfs. Deutlich abgesetzt, damit niemand sie
   für einen Teil der Erklärung hält. */
.datenschutz blockquote {
  margin: 0 0 1.1em;
  padding: .1em 0 .1em 1rem;
  border-left: 3px solid rgb(203 213 225);
  color: rgb(100 116 139);
  font-size: .95em;
}
.datenschutz blockquote p:last-child { margin-bottom: 0; }

.datenschutz table {
  width: 100%;
  margin: 0 0 1.1em;
  border-collapse: collapse;
  font-size: .9rem;
}
.datenschutz th, .datenschutz td {
  padding: .45rem .6rem;
  border-bottom: 1px solid rgb(226 232 240);
  text-align: left;
  vertical-align: top;
}
.datenschutz th { font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .datenschutz hr { border-color: rgb(30 41 59); }
  .datenschutz pre { background: rgb(2 6 23); }
  .datenschutz blockquote { border-left-color: rgb(51 65 85); color: rgb(148 163 184); }
  .datenschutz th, .datenschutz td { border-bottom-color: rgb(30 41 59); }
}