* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
  font-family: "Questrial", Arial, Helvetica, sans-serif;
}

#root {
  background: var(--theme-bg);
  color: var(--theme-text);
  min-width: 0;
}

body {
  background: var(--theme-bg);
}

main {
  min-width: 0;
}

.shell {
  width: var(--container-wide);
  margin: 0 auto;
  padding: 0 0 clamp(2.2rem, 6vw, 5rem);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page,
.detail-page,
.discovery-page,
.about-page,
.support-page,
.small-page,
.impressum-page,
.datenschutz-page {
  isolation: isolate;
}

.detail-page .navbar--light,
.discovery-page .navbar--light,
.about-page .navbar--light,
.support-page .navbar--light,
.small-page .navbar--light,
.impressum-page .navbar--light,
.datenschutz-page .navbar--light {
  position: fixed;
  top: clamp(0.75rem, 2.1vw, 1.4rem);
  right: 0;
  left: 0;
  z-index: 998;
  margin-bottom: 0;
  padding-top: 0;
  pointer-events: none;
}

.detail-page .navbar--light .nav-pill,
.discovery-page .navbar--light .nav-pill,
.about-page .navbar--light .nav-pill,
.support-page .navbar--light .nav-pill,
.small-page .navbar--light .nav-pill,
.impressum-page .navbar--light .nav-pill,
.datenschutz-page .navbar--light .nav-pill {
  pointer-events: auto;
}

.navbar--light .nav-pill,
.navbar--light .nav-link,
.shell,
[class*="-page"],
[class*="-shell"],
[class*="-card"],
[class*="-panel"],
[class*="-box"],
button,
input,
textarea {
  transition:
    background-color var(--duration-med) var(--ease-out),
    border-color var(--duration-med) var(--ease-out),
    color var(--duration-med) var(--ease-out),
    box-shadow var(--duration-med) var(--ease-out);
}

body.theme-dark .navbar--light .nav-pill {
  background: rgba(38, 38, 38, 0.88);
  border-color: rgba(234, 234, 234, 0.26);
}

body.theme-dark .navbar--light .nav-link {
  color: var(--theme-white);
}

body.theme-dark .navbar--light .nav-link:hover,
body.theme-dark .navbar--light .nav-link.active {
  background: rgba(234, 234, 234, 0.15);
}

body.theme-dark .navbar--light .nav-theme-switch__track {
  border-color: rgba(234, 234, 234, 0.3);
  background: rgba(234, 234, 234, 0.14);
}

body.theme-dark .navbar--light .nav-brand-logo {
  filter: invert(1) brightness(1.08);
}

body.theme-light .navbar--light .nav-link:hover,
body.theme-light .navbar--light .nav-link.active {
  background: var(--theme-surface-soft);
}