/* ==========================================================================
   Gemeinsames Stylesheet der vier Rechtsseiten (Impressum, Datenschutz,
   AGB, AVV).

   Dieselben Dateien werden von ZWEI Servern ausgeliefert: von jeder
   Kundeninstanz (BFF, wwwroot) und von der zentralen Produktseite
   (statischer Container). Deshalb gilt hier: kein Nachladen eines fremden
   Stylesheets, keine Webschrift, keine externe Adresse. Was die Seite
   braucht, steht in dieser Datei.

   Die Farbwerte sind der UI-Vertrag der Anwendung, hier bewusst direkt in
   rgb()-Notation notiert: die Rechtsseiten sind kein Blazor und haben
   keinen Zugriff auf die MudBlazor-Variablen.
   ========================================================================== */

:root {
  --hintergrund: rgb(244, 246, 248);
  --flaeche: rgb(255, 255, 255);
  --text: rgb(26, 32, 39);
  --akzent: rgb(30, 95, 191);
  --linien: rgb(226, 230, 234);
}

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  /* Systemschrift statt Inter/woff2: eine Schriftdatei muesste an beiden
     Ausspielorten liegen und waere die einzige Ladeabhaengigkeit der Seite. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  background: var(--flaeche);
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 .25rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2rem 0 .5rem;
}

h3 {
  font-size: 1rem;
  margin: 1.25rem 0 .35rem;
}

a {
  color: var(--akzent);
}

hr,
table,
th,
td {
  border-color: var(--linien);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
}

th,
td {
  border: 1px solid var(--linien);
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
}

.stand {
  color: rgb(96, 104, 112);
  font-size: .9rem;
}

.zurueck {
  display: inline-block;
  margin-bottom: 1.5rem;
}

/* Wird von agb.html und avv.html benutzt (Plan 01.1-02). Die Klasse steht
   hier, damit beide Plaene dieselbe Datei nicht gleichzeitig anfassen
   muessen. */
.entwurf {
  border: 2px solid rgb(191, 110, 30);
  background: rgb(255, 247, 235);
  padding: .85rem 1rem;
  margin: 0 0 1.5rem;
  font-weight: 600;
}

/* Rechtstexte muessen auf dem Telefon lesbar sein - eine Tabelle mit vier
   Spalten ist es dort nicht. */
@media (max-width: 40rem) {
  main {
    padding: 1.25rem 1rem 3rem;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
}

/* Lizenz-Volltexte (Phase 13). Ein Rechtstext im Original bricht seine Zeilen selbst -
   auf dem Telefon passt er trotzdem nicht. Umbrechen statt seitwaerts rollen: ein Text,
   den man nur mit horizontalem Schieben lesen kann, ist nicht "leicht erkennbar". */
pre.lizenztext {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: .8rem;
  line-height: 1.45;
  background: var(--hintergrund);
  border: 1px solid var(--linien);
  padding: .75rem .85rem;
  margin: 0 0 1.5rem;
}