html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-blue);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Hausschrift von bannas.com (SIL Open Font License, siehe fonts/OFL.txt). */
@font-face {
  font-family: "Fira Sans Condensed";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/FiraSansCondensed-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Sans Condensed";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/FiraSansCondensed-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Sans Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/FiraSansCondensed-Bold.ttf") format("truetype");
}

/* Erscheinungsbild nach bannas.com: Blau als Hauptfarbe, dunkelgrauer Text, runde Knöpfe, hellgraue Flächen.
   Die Umrisse sind dunkler als bei Bootstrap üblich, damit sich Kästen, Listen und Felder klar abheben. */
:root {
  --bs-body-font-family: "Fira Sans Condensed", Helvetica, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --brand-blue: #1084b0;
  --brand-blue-dark: #0c6a8e;
  --brand-red: #c61b36;
  --brand-line: #adadad;
  --brand-control-line: #808080;
  --bs-border-color: var(--brand-line);
  --bs-border-radius: 5px;
  --bs-body-color: #353535;
  --bs-primary: var(--brand-blue);
  --bs-primary-rgb: 16, 132, 176;
  --bs-link-color: var(--brand-blue);
  --bs-link-color-rgb: 16, 132, 176;
  --bs-link-hover-color: var(--brand-blue-dark);
  --bs-link-hover-color-rgb: 12, 106, 142;
}

/* Überschriften wie auf der Website groß und leicht, Hervorhebungen fett. */
h1, h2, h3, .h1, .h2, .h3, .h4 {
  font-weight: 300;
  letter-spacing: 0.01em;
}

.btn {
  --bs-btn-border-radius: 30px;
  --bs-btn-font-weight: 700;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.btn-primary {
  --bs-btn-bg: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-blue-dark);
  --bs-btn-hover-border-color: var(--brand-blue-dark);
  --bs-btn-active-bg: var(--brand-blue-dark);
  --bs-btn-active-border-color: var(--brand-blue-dark);
  --bs-btn-disabled-bg: var(--brand-blue);
  --bs-btn-disabled-border-color: var(--brand-blue);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-blue);
  --bs-btn-hover-border-color: var(--brand-blue);
  --bs-btn-active-bg: var(--brand-blue);
  --bs-btn-active-border-color: var(--brand-blue);
}

.btn-outline-danger {
  --bs-btn-color: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red);
  --bs-btn-hover-border-color: var(--brand-red);
}

/* Kopfzeile: Logo, Titel in Großbuchstaben wie die Navigation der Website, darunter eine blaue Linie. */
.navbar {
  border-bottom: 2px solid var(--brand-blue);
}

.navbar-brand {
  color: var(--bs-body-color);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navbar-brand:hover {
  color: var(--brand-blue);
}

.list-group-item,
.bg-light {
  --bs-list-group-border-radius: 5px;
  background-color: #f4f4f4 !important;
}

.table > thead > tr > th {
  border-bottom: 2px solid var(--brand-blue);
}

hr {
  color: var(--brand-line);
  opacity: 1;
}

.badge {
  --bs-badge-border-radius: 30px;
}

/* Marke „Beschränkt“ wie in der App: hellblau mit Rand. */
.badge-restricted {
  background-color: #dde9ee;
  border: 1px solid var(--brand-line);
  color: #013e55;
}

/* Lückenwörter in der Kartenvorschau, hervorgehoben wie in der App unter „Karten ansehen“. */
.cloze-gap {
  color: var(--brand-blue);
  font-weight: 700;
  text-decoration: underline;
}

.alert-info {
  --bs-alert-bg: #d9eef6;
  --bs-alert-border-color: var(--brand-blue);
  --bs-alert-color: #013e55;
}

.form-control,
.form-check-input {
  border-color: var(--brand-control-line);
}

.form-control:focus,
.form-check-input:focus {
  border-color: var(--brand-blue);
}

.form-check-input:checked {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}