@font-face {
  font-family: "Open Sans";
  src: url("../assets/branding/fonts/OpenSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/branding/fonts/OpenSans-Semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/branding/fonts/OpenSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.definition,.theorem,.example,.exercise,.hint,.lecture-task,.solution,.answer {
  border-left: .3rem solid #87ccd3; padding: .75rem 1rem; margin: 1rem 0;
  background: #f4fbfc;
}
.theorem { border-color: #bc99c7; }
.example { border-color: #ec660c; background: #fff7f0; }
.exercise,.lecture-task { border-color: #ec660c; }
.solution,.answer { border-color: #83be63; }
.example > :first-child { margin-top: 0; }
.example > :last-child { margin-bottom: 0; }
.example .example-solution { margin: .9rem 0 0; border-left-color: #83be63; }
.example .example-solution .callout-header { background-color: #eef8e9; }
.web-inequality-plot {
  display: block;
  margin: 1rem auto;
}
.example .example-solution .callout-title-container { font-weight: 700; }
.web-note,.web-warning {
  border-left: .3rem solid #87ccd3; padding: .75rem 1rem; margin: 1rem 0;
  background: #f4fbfc;
}
.web-warning { border-color: #ec660c; background: #fff7f0; }
.web-note > :first-child,.web-warning > :first-child { margin-top: 0; }
.jupyterhub-button { display:inline-block; padding:.55rem .85rem; border-radius:.35rem;
  background:#231f20; color:white; font-weight:600; text-decoration:none; }
.jupyterhub-button:hover { background:#454545; color:white; }
iframe { border: 1px solid #ccd5dc; border-radius: .25rem; }

/* Untergeordnete Seitenüberschriften im rechten Inhaltsverzeichnis offen zeigen. */
#TOC ul.collapse {
  display: block;
}

/* Unsichtbarer Zähleranker hält selektive Formelnummern über Webseiten hinweg synchron. */
.web-equation-offset { display: none; }

/*
 * Quarto dockt die linke Navigation am Fensterrand an und legt zusätzlichen
 * Platz nur rechts ab. Auf breiten Bildschirmen wird deshalb der vollständige
 * Dreispaltenblock zentriert: 250 px Navigation, 900 px Text, 250 px TOC.
 */
@media (min-width: 1450px) {
  body.docked .page-columns,
  body.docked #quarto-header {
    grid-template-columns:
      [screen-start] minmax(1.5rem, 1fr)
      [screen-start-inset page-start] 250px
      [page-start-inset body-start-outset body-start] 1.5rem
      [body-content-start] minmax(500px, 900px)
      [body-content-end] 1.5rem
      [body-end body-end-outset page-end-inset] 250px
      [page-end screen-end-inset] minmax(1.5rem, 1fr)
      [screen-end];
  }

  body.docked .sidebar.sidebar-navigation {
    grid-column: page-start / body-start;
  }
}

/* Nur fachliche Listen nummerieren; Breadcrumbs sind ebenfalls <ol>-Elemente. */
#quarto-document-content ol:not(.breadcrumb) {
  counter-reset: htw-ordered-list;
  list-style: none;
  padding-left: 2.8rem;
}
#quarto-document-content ol:not(.breadcrumb) > li {
  counter-increment: htw-ordered-list;
  position: relative;
}
#quarto-document-content ol:not(.breadcrumb) > li::before {
  content: "(" counter(htw-ordered-list) ")";
  left: -2.8rem;
  position: absolute;
  text-align: right;
  width: 2rem;
}

/* Lokal ausgelieferte zweite HTWD-Hausschrift, Lizenz im Schriftordner. */
@font-face {
  font-family: "Besley";
  src: url("../assets/branding/fonts/Besley.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
/* Das vollständige Original-Logo enthält seine unveränderte Schutzzone.
   Es bleibt auch ohne rechte Randspalte auf jedem Bildschirm erreichbar. */
.htwd-footer-logo { width: 310px; max-width: 100%; height: auto; }
.nav-footer { gap: 1rem; align-items: center; }
.nav-footer .nav-footer-left { flex: 0 1 310px; }
.nav-footer .nav-footer-center { color: #231f20; }
.nav-footer .nav-footer-right .nav { flex-wrap: wrap; gap: .35rem 1rem; }
.nav-footer a { color: #231f20; text-decoration: underline; text-underline-offset: .2em; }
.nav-footer a:focus-visible { outline: 3px solid #231f20; outline-offset: 3px; }
@media (max-width: 991.98px) {
  .nav-footer { flex-direction: column; align-items: center; }
  .nav-footer .nav-footer-left { flex-basis: auto; min-width: 0; }
  .nav-footer .nav-footer-right .nav { justify-content: center; }
}
/* Lange Formeln scrollen innerhalb ihres Blocks statt die Seite zu verbreitern. */
.math.display { display: block; max-width: 100%; overflow-x: auto; }

/* Auch lange Kontaktadressen dürfen auf sehr schmalen Geräten umbrechen. */
#quarto-document-content p, .nav-footer { overflow-wrap: anywhere; }
.nav-footer > div { min-width: 0; max-width: 100%; }
@media (max-width: 400px) {
  .nav-footer { padding-inline: .25rem; }
}
/* Rechtstextlinks als ganze Wörter umbrechen, nicht innerhalb der Beschriftung. */
.nav-footer .footer-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  padding: 0;
  margin: 0;
}
.nav-footer .footer-items .nav-item { flex: 0 0 auto; width: auto; }
.nav-footer .footer-items .nav-link { white-space: nowrap; }
@media (max-width: 991.98px) {
  .nav-footer .nav-footer-right { width: auto; flex: 0 1 auto; }
  .nav-footer .nav-footer-center { width: 100%; flex: 0 1 auto; }
}
/* Transparenter Logohintergrund; Mindestbreite der Wortmarke: 120 px. */
.htwd-footer-logo { background: transparent; }
@media (max-width: 400px) {
  .nav-footer .nav-footer-left { width: 300px; max-width: none; }
  .htwd-footer-logo { width: 300px; max-width: none; }
}