@font-face {
  font-family: 'Charis SIL';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('charis-sil-400.BoW7QV_k.woff2') format('woff2');
}

@font-face {
  font-family: 'Charis SIL';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('charis-sil-400-kursiv.ctVa26oY.woff2') format('woff2');
}

@font-face {
  font-family: 'Charis SIL';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('charis-sil-700.ChAsMzFa.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  --smaragd: #00a179;
  --blau: #577fbe;
  --bernstein: #f2b704;
  --gruen: #89ba48;
  --gelb: #f7d902;
  --marine: #1e3a7a;

  --papier: #ffffff;
  --flaeche: #f0f2f1;
  --tisch: #eceeed;
  --tinte: #1b2027;
  --leise: #59616b;
  --linie: #dadfdd;
  --betont: var(--marine);
  --auf-farbe: #0e1114;
  --auf-bereich: var(--auf-farbe);
  --cave: #b3261e;
  --cave-flaeche: #fcedeb;
  --fokus: var(--marine);
  --bereich: var(--tisch);

  --schrift: 'Charis SIL', Charter, 'Bitstream Charter', Georgia, serif;
  --abstand: 18px;
  --breite: 680px;
  --breit: 1200px;
  --rand-breit: 40px;
  --rand: var(--abstand);
  --leiste: 68px;
  --tippziel: 44px;
  --zug: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #121417;
    --flaeche: #1b1f23;
    --tisch: #0b0c0e;
    --tinte: #e6e3dc;
    --leise: #a5abb2;
    --linie: #2c3137;
    --betont: #a9bfe6;
    --cave: #ff8c80;
    --cave-flaeche: #2c1715;
    --fokus: var(--gelb);
  }
}

@media (min-width: 960px) {
  :root {
    --rand: var(--rand-breit);
  }
}

[data-bereich='internistisch'] {
  --bereich: var(--smaragd);
}

[data-bereich='neurologisch'] {
  --bereich: var(--blau);
}

[data-bereich='chirurgisch-trauma'] {
  --bereich: var(--bernstein);
}

[data-bereich='pflege-verfahren'] {
  --bereich: var(--gruen);
}

[data-bereich='recht'] {
  --bereich: var(--flaeche);
  --auf-bereich: var(--tinte);
}

[data-bereich='grundlagen'] {
  --bereich: var(--marine);
  --auf-bereich: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 44px;
}

@media (min-width: 960px) {
  html {
    scroll-padding-top: var(--leiste);
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--betont);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.innen {
  width: 100%;
  max-width: calc(var(--breit) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid transparent;
  font-weight: 700;
  text-decoration: none;
  transform: translate(calc(var(--kx, 0) * 12px), calc(var(--ky, 0) * 10px));
  transition:
    background-color 180ms var(--zug),
    color 180ms var(--zug),
    border-color 180ms var(--zug),
    transform 260ms var(--zug);
}

.knopf-gelb {
  background: var(--gelb);
  color: var(--auf-farbe);
}

.knopf-gelb:hover {
  background: #ffffff;
}

.knopf-rand {
  border-color: currentColor;
  color: inherit;
}

.knopf-rand:hover {
  background: color-mix(in oklab, currentColor 12%, transparent);
}

.knopf-tinte {
  background: var(--tinte);
  color: var(--papier);
}

.knopf-tinte:hover {
  background: var(--marine);
  color: #ffffff;
}

[data-modus='easy'] .block-exam,
[data-modus='exam'] .block-easy {
  display: none;
}

.block {
  margin: 1em 0;
}

.block > :first-child {
  margin-top: 0;
}

.block > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  [data-auf] .aufschlagen > :not(.offen) {
    opacity: 0;
  }

  .aufschlagen > .offen {
    animation: aufschlagen 420ms var(--zug) both;
  }
}

@keyframes aufschlagen {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

[data-modus-gewechselt] .block-easy,
[data-modus-gewechselt] .block-exam {
  animation: auftauchen 260ms var(--zug);
}

@keyframes auftauchen {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.block-exam ol {
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.block-exam ol > li {
  position: relative;
  padding: 0 0 16px 46px;
  counter-increment: schritt;
}

.block-exam ol > li::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--betont);
  background: var(--papier);
  color: var(--betont);
  font-size: 0.9375rem;
  font-weight: 700;
}

.block-exam ol > li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 14px;
  width: 2px;
  background: var(--linie);
}

.block-cave {
  padding: 14px 16px;
  border: 2px solid var(--cave);
}

.block-cave strong:first-child {
  color: var(--cave);
}

.block-pflege {
  margin-inline: calc(var(--abstand) * -1);
  padding: 18px var(--abstand);
  background: color-mix(in oklab, var(--bereich) 16%, var(--papier));
}

.block-pflege ul {
  padding-left: 1.2em;
}

.block-frage {
  padding: 12px 16px;
  border: 2px dashed var(--bernstein);
}

.block-frage::before {
  content: 'Offene Frage an die fachliche Leitung';
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
}

.block-animation {
  display: grid;
  place-content: center;
  min-height: 180px;
  padding: 16px;
  border: 2px solid var(--tinte);
  background: var(--flaeche);
  color: var(--leise);
  text-align: center;
}

.block-animation::before {
  content: 'Animation';
  color: var(--tinte);
  font-weight: 700;
}

mark {
  padding: 0 0.15em;
  background: linear-gradient(transparent 0.34em, var(--gelb) 0.34em 1.41em, transparent 1.41em);
  color: var(--auf-farbe);
  box-decoration-break: clone;
}

.q {
  color: var(--leise);
  font-size: 0.8em;
  text-decoration-style: dotted;
  white-space: nowrap;
}

.q::before {
  content: '(';
}

.q::after {
  content: ')';
}

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  overflow: clip;
  animation-duration: 360ms;
  animation-timing-function: var(--zug);
}

::view-transition-old(*),
::view-transition-new(*) {
  height: auto;
  object-fit: none;
  object-position: left top;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    interpolate-size: allow-keywords;
  }

  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}
.seite[data-astro-cid-dyhekl2n] {
  --leiste-grund: var(--marine);
  --leiste-text: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--papier);
}

.seite[data-astro-cid-dyhekl2n][data-bereich] {
  --leiste-grund: var(--bereich);
  --leiste-text: var(--auf-bereich);
  border-inline-end: 8px solid var(--bereich);
}

.seite[data-astro-cid-dyhekl2n] > main {
  flex: 1;
}

.leiste[data-astro-cid-dyhekl2n] {
  display: none;
}

.zeichen[data-astro-cid-dyhekl2n] {
  display: grid;
  grid-template-columns: repeat(4, 5px);
  height: 22px;
}

.zeichen[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:first-child, .fuss-schnitt[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:first-child {
  background: var(--smaragd);
}

.zeichen[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:nth-child(2), .fuss-schnitt[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:nth-child(2) {
  background: var(--blau);
}

.zeichen[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:nth-child(3), .fuss-schnitt[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:nth-child(3) {
  background: var(--bernstein);
}

.zeichen[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:nth-child(4), .fuss-schnitt[data-astro-cid-dyhekl2n] i[data-astro-cid-dyhekl2n]:nth-child(4) {
  background: var(--gruen);
}

.fuss[data-astro-cid-dyhekl2n] {
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: .9375rem;
}

.fuss-innen[data-astro-cid-dyhekl2n] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  padding-block: 28px 30px;
}

.fuss-text[data-astro-cid-dyhekl2n] {
  display: grid;
  grid-column: 1 / -1;
  align-content: start;
  gap: 6px;
}

.fuss-titel[data-astro-cid-dyhekl2n] {
  color: var(--tinte);
  font-weight: 700;
}

.fuss-spalte[data-astro-cid-dyhekl2n] ul[data-astro-cid-dyhekl2n] {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.fuss-signatur[data-astro-cid-dyhekl2n] {
  display: grid;
  gap: 4px;
  padding-block: 22px 26px;
}

.fuss-band[data-astro-cid-dyhekl2n] {
  border-top: 1px solid var(--linie);
}

.fuss[data-astro-cid-dyhekl2n] .signatur[data-astro-cid-dyhekl2n] {
  max-width: none;
  color: var(--tinte);
  font-size: clamp(1.25rem, 4.6vw, 1.75rem);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.fuss[data-astro-cid-dyhekl2n] p[data-astro-cid-dyhekl2n] {
  margin: 0;
  max-width: 54ch;
}

.fuss[data-astro-cid-dyhekl2n] .fuss-marke[data-astro-cid-dyhekl2n] {
  color: var(--tinte);
  font-size: 1.125rem;
  font-weight: 700;
}

.fuss[data-astro-cid-dyhekl2n] a[data-astro-cid-dyhekl2n] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippziel);
}

.fuss-wort[data-astro-cid-dyhekl2n] {
  display: flex;
  margin: 0;
  padding: 12px var(--rand) 0;
  overflow: clip;
  color: var(--marine);
  font-size: calc((100vw - 2 * var(--rand)) / 4.7);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
}

.fuss-wort[data-astro-cid-dyhekl2n] span[data-astro-cid-dyhekl2n] {
  display: inline-block;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fuss-wort[data-astro-cid-dyhekl2n] span[data-astro-cid-dyhekl2n] {
      animation: linear both hochfahren;
      animation-timeline: view();
      animation-range: entry calc(var(--b) * 4%) entry calc(55% + var(--b) * 4%);
    }

    @keyframes hochfahren {
      from {
        translate: 0 70%;
      }
    }
  }
}

.fuss-schnitt[data-astro-cid-dyhekl2n] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 8px;
}

@media (width >= 960px) {
  .leiste[data-astro-cid-dyhekl2n] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: block;
    border-bottom: 1px solid var(--linie);
    background: var(--papier);
    color: var(--tinte);
    view-transition-name: leiste;
  }

  .leiste[data-astro-cid-dyhekl2n]:before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
        var(--smaragd) 0 25%,
        var(--blau) 0 50%,
        var(--bernstein) 0 75%,
        var(--gruen) 0);
  }

  @supports (animation-timeline: scroll()) {
    .leiste[data-astro-cid-dyhekl2n] {
      animation: linear both leiste-wechsel;
      animation-timeline: scroll();
      animation-range: 0 var(--leiste-bis, 240px);
    }

    @keyframes leiste-wechsel {
      from, 80% {
        border-bottom-color: #0000;
        background: var(--leiste-grund);
        color: var(--leiste-text);
      }

      to {
        border-bottom-color: var(--linie);
        background: var(--papier);
        color: var(--tinte);
      }
    }
  }

  .leiste-innen[data-astro-cid-dyhekl2n] {
    display: flex;
    align-items: center;
    gap: 40px;
    height: calc(var(--leiste) - 4px);
  }

  .marke[data-astro-cid-dyhekl2n] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
  }

  .leiste[data-astro-cid-dyhekl2n] nav[data-astro-cid-dyhekl2n] {
    display: flex;
    gap: 28px;
    margin-right: auto;
  }

  .leiste[data-astro-cid-dyhekl2n] nav[data-astro-cid-dyhekl2n] a[data-astro-cid-dyhekl2n] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tippziel);
    color: inherit;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left bottom 8px / 0 2px no-repeat;
    transition: background-size .22s var(--zug);
  }

  .leiste[data-astro-cid-dyhekl2n] nav[data-astro-cid-dyhekl2n] a[data-astro-cid-dyhekl2n][aria-current], .leiste[data-astro-cid-dyhekl2n] nav[data-astro-cid-dyhekl2n] a[data-astro-cid-dyhekl2n]:hover {
    background-size: 100% 2px;
  }

  .leiste[data-astro-cid-dyhekl2n] .knopf[data-astro-cid-dyhekl2n] {
    min-height: 42px;
    padding-inline: 18px;
  }

  .fuss-innen[data-astro-cid-dyhekl2n] {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding-block: 40px 44px;
  }

  .fuss-text[data-astro-cid-dyhekl2n] {
    grid-column: auto;
  }

  .fuss-signatur[data-astro-cid-dyhekl2n] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-block: 28px 32px;
  }
}