:root {
  --sk-ein: cubic-bezier(.16, 1, .3, 1);
  --t-streak: clamp(72px, 7vw, 112px);
}
.sk-zeichen {
  display: inline-grid;
  flex: none;
  width: 24px;
  height: 23px;
}
.sk-zeichen > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sk-blitz {
  opacity: 0;
}
.sk-zahl {
  display: inline-grid;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.sk-zahl > span {
  grid-area: 1 / 1;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-zeichen.blitz .sk-blitz {
    animation: mk-blitz .56s var(--ease) both;
  }
  .sk-zeichen.blitz .sk-b2 {
    animation-delay: .12s;
  }
  .sk-zeichen.blitz .sk-b1 {
    animation-delay: .24s;
  }
  .sk-zahl > .raus {
    animation: sk-raus .5s var(--sk-ein) forwards;
  }
  .sk-zahl > .rein {
    animation: sk-rein .6s var(--sk-ein) both;
  }
  .sk-tage-bild .sk-tag.neu {
    transform-box: fill-box;
    transform-origin: center;
    animation: sk-tag .5s var(--pop) both;
  }
}
@keyframes sk-raus {
  to {
    opacity: 0;
    transform: translateY(-70%);
  }
}
@keyframes sk-rein {
  from {
    opacity: 0;
    transform: translateY(70%);
  }
}
@keyframes sk-tag {
  from {
    opacity: .3;
    transform: scale(.5);
  }
}
.sk-zeichen path:not(.sk-blitz) {
  transition: stroke .4s var(--ease);
}
.sk-chip:not(.heute-fertig) .sk-zeichen path:not(.sk-blitz),
.sk-feld:not(.heute-fertig) .sk-label .sk-zeichen path:not(.sk-blitz),
.ha-zeile:not(.geschafft) .sk-zeichen path:not(.sk-blitz) {
  stroke: rgba(150, 172, 222, .5);
}
.sk-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: 999px;
  background: rgba(4, 10, 20, .34);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font: 500 var(--t-14)/1 var(--sans);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .15s var(--ease),
    box-shadow .15s var(--ease),
    color .15s var(--ease),
    transform .12s var(--ease);
}
.sk-chip[hidden] {
  display: none;
}
.rt-leiste .sk-chip {
  margin-left: var(--s-2);
}
.rt-leiste:not(:has(.fassung:not([hidden]), .wahl[data-fassungswahl]:not([hidden]))) .sk-chip {
  margin-left: auto;
}
.sk-chip .sk-zeichen {
  width: 16px;
  height: 15px;
}
.sk-chip-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sk-chip .sk-zahl {
  color: var(--text);
  font: 750 var(--t-16)/1 var(--sans);
}
.sk-chip-tage {
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin-left: var(--s-1);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line-2);
}
.sk-chip-tage:empty {
  display: none;
}
.sk-chip .sk-tage-bild {
  display: block;
  width: 98px;
  height: 14px;
  overflow: visible;
}
.sk-chip:not(.ohne-tage):has(> .sk-chip-tage:not(:empty)) {
  padding-right: var(--s-3);
}
.sk-chip .sk-einheit-kurz,
.sk-chip.kurz .sk-einheit,
.sk-chip.ohne-wort :is(.sk-einheit, .sk-einheit-kurz) {
  display: none;
}
.sk-chip.kurz:not(.ohne-wort) .sk-einheit-kurz {
  display: inline;
}
.sk-chip.ohne-tage .sk-chip-tage {
  display: none;
}
.rt-leiste:has(> .sk-chip.ohne-fassung) > .fassung {
  display: none;
}
.rt-leiste > .sk-chip.ohne-fassung {
  margin-left: auto;
}
.rt-leiste:has(> .sk-chip.eng) .wahl[data-sitzungswahl] button {
  padding: 0 var(--s-2);
}
.rt-leiste > .sk-chip.eng {
  padding: 0 var(--s-3);
}
.sk-chip:active {
  transform: scale(var(--druck-knopf));
  background: rgba(150, 172, 222, .12);
}
.sk-chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 999px;
}
.sk-feld {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--s-6) var(--s-7);
  padding: var(--s-6);
  border-radius: var(--r-3);
  background: rgba(150, 172, 222, .05);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sk-feld[hidden] {
  display: none;
}
[data-fortschritt][data-zustand=laden] > :is(.sk-feld, .fs-gruppe) {
  display: none;
}
.sk-feld > section {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
}
.sk-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--text-2);
  font: 600 var(--t-14)/1.2 var(--sans);
  letter-spacing: 0;
}
.sk-label .sk-zeichen {
  width: 18px;
  height: 17px;
}
.sk-gross {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: 0;
  letter-spacing: 0;
}
.sk-gross .sk-zahl {
  color: var(--text);
  font: 300 var(--t-streak)/.9 var(--sans);
  letter-spacing: -.05em;
}
.sk-feld .sk-einheit {
  color: var(--text-2);
  font: 600 var(--t-20)/1.2 var(--sans);
  letter-spacing: -.01em;
}
.sk-regel {
  max-width: 34em;
  margin: 0;
  color: var(--text-3);
  font-size: var(--t-14);
  line-height: 1.5;
  text-wrap: pretty;
}
.sk-regel .sk-nb {
  white-space: nowrap;
}
.sk-woche-feld {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.sk-woche {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  color: var(--text-2);
  font: 500 var(--t-14)/1.2 var(--sans);
  white-space: nowrap;
}
.sk-woche b {
  color: var(--text);
  font: 750 var(--t-20)/1 var(--sans);
}
.sk-balken,
.sk-kalender {
  display: grid;
  gap: var(--s-2);
  width: min(100%, 336px);
}
.sk-kalender {
  width: min(100%, 360px);
}
.sk-balken-bild,
.sk-kalender-bild {
  display: block;
  width: 100%;
  height: auto;
}
.sk-spalten {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-3);
  font: 500 var(--t-14)/1 var(--sans);
  text-align: center;
}
.sk-spalten .heute {
  color: var(--text);
  font-weight: 650;
}
.sk-weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  min-height: 44px;
  color: var(--text);
  font: 600 var(--t-14)/1 var(--sans);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease);
}
.sk-weiter .ik {
  width: 16px;
  height: 16px;
  transition: transform .15s var(--ease);
}
.sk-weiter:active {
  color: var(--cyan);
}
.sk-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-3);
  font: 500 var(--t-12)/1.3 var(--sans);
}
.sk-legende li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.sk-legende svg {
  flex: none;
  width: 12px;
  height: 12px;
}
.sk-zeitzone {
  margin: 0;
  color: var(--text-3);
  font: 500 var(--t-12)/1.3 var(--sans);
}
.fs-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.fs-gruppe[hidden] {
  display: none;
}
.sk-feld + .fs-gruppe {
  padding-top: 0;
  border-top: 0;
}
.fs-gruppe h2 {
  margin: 0;
  font: 700 var(--t-20)/1.2 var(--sans);
  letter-spacing: -.02em;
}
[data-fortschritt][data-mit-streak] .mb-kopf .plakette {
  display: none;
}
.held-aktiv {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(100%, 520px);
}
.held-aktiv[hidden] {
  display: none;
}
.ha-zeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border-radius: var(--r-3);
  background: rgba(18, 34, 58, .6);
  box-shadow: inset 0 0 0 1px var(--s-kante, rgba(150, 172, 222, .14));
  color: var(--text-2);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition:
    color .15s var(--ease),
    box-shadow .15s var(--ease),
    transform .12s var(--ease);
}
.ha-zeile[hidden] {
  display: none;
}
.ha-zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(4, 10, 20, .55);
}
.ha-zeichen .sk-zeichen {
  width: 20px;
  height: 19px;
}
.ha-team .ik {
  width: 20px;
  height: 20px;
  color: var(--text-2);
}
.ha-zeile.geschafft .ha-team .ik {
  color: var(--gut);
}
.ha-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ha-oben {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font: 600 var(--t-16)/1.25 var(--sans);
  white-space: nowrap;
}
.ha-oben > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ha-oben .sk-zahl {
  font-weight: 750;
}
.ha-zeile.ohne-zahl .ha-oben .sk-zahl {
  display: none;
}
.ha-unten {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font: 500 var(--t-16)/1.3 var(--sans);
}
.ha-zeile.geschafft .ha-unten {
  color: var(--gut);
}
.ha-tage .sk-tage-bild {
  display: block;
  width: 98px;
  height: 14px;
  overflow: visible;
}
.ha-weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  font: 600 var(--t-16)/1 var(--sans);
  white-space: nowrap;
}
.ha-weiter .ik {
  width: 16px;
  height: 16px;
  transition: transform .15s var(--ease);
}
.ha-zeile:active {
  transform: scale(.985);
}
.ha-zeile:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.ax-held-text > .held-aktiv {
  margin-top: var(--s-5);
  justify-self: center;
}
.ax-held[data-mit-streak] .ax-held-text > .held-neu {
  display: none;
}
.ax-held[data-streak-wartet] .ax-held-text > .held-neu {
  visibility: hidden;
}
.ax-held[data-mit-streak] .ax-v-marke > img {
  display: none;
}
@media (min-width: 1024px) {
  .ax-held-text > .held-aktiv {
    grid-column: 1 / -1;
  }
  .ax-held[data-mit-streak] .ax-held-text > .ax-vertrauen {
    grid-column: 1 / -1;
  }
  .held-aktiv:has(> .ha-zeile:not([hidden]) ~ .ha-zeile:not([hidden])) {
    flex-direction: row;
    gap: var(--s-4);
    width: min(100%, 1056px);
  }
  .held-aktiv > .ha-zeile {
    flex: 1 1 0;
    min-width: 0;
  }
  .held-aktiv:has(> .ha-zeile:not([hidden]) ~ .ha-zeile:not([hidden])) .ha-unten .ha-name {
    display: none;
  }
  .held-aktiv .ha-unten {
    font-size: var(--t-14);
  }
}
@media (max-width: 600px) {
  .ha-zeile {
    grid-template-columns: 40px minmax(0, 1fr) auto 16px;
    gap: var(--s-2) var(--s-3);
    padding-right: var(--s-3);
  }
  .ha-wort,
  .ha-unten .ha-name {
    display: none;
  }
  .held-aktiv > .ha-zeile.ha-zweite {
    display: none;
  }
  .ha-zeile[data-ha=trio] .ha-tage {
    display: none;
  }
  .ha-zeile[data-ha=trio] {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
  }
  .ha-zeile[data-ha=pro] .ha-tage {
    display: none;
  }
  .ha-zeile[data-ha=pro] {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
  }
}
.ha-zeile.ohne-tage .ha-tage {
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .ax-held-text > .held-aktiv {
    animation: ax-rein .6s var(--sk-ein) var(--hs-verzug, 0ms) both;
  }
  html[data-js] .ax-held[data-streak-spaet] .ax-held-text > .held-neu {
    animation: ax-rein .5s var(--sk-ein) both;
  }
}
@media (hover: hover) {
  .sk-chip:hover {
    background: rgba(150, 172, 222, .1);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--text);
  }
  .ha-zeile:hover {
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--s-kante-hell, rgba(150, 172, 222, .28));
  }
  .ha-zeile:hover .ha-weiter .ik,
  .sk-weiter:hover .ik {
    transform: translateX(var(--pfeil-weg));
  }
  .sk-weiter:hover {
    color: var(--cyan);
  }
}
@media (max-width: 1100px) {
  .sk-feld {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .sk-chip {
    height: 52px;
  }
  .rt-leiste .sk-chip {
    margin-left: 0;
  }
  .sk-feld {
    padding: var(--s-5) var(--s-4);
  }
  .sk-legende,
  .sk-zeitzone {
    font-size: var(--t-14);
  }
  .sk-regel,
  .sk-feld .sk-einheit,
  .sk-woche b {
    font-size: var(--t-16);
  }
  .sk-balken,
  .sk-kalender {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ha-zeile,
  .ha-weiter .ik,
  .sk-weiter,
  .sk-weiter .ik,
  .sk-chip {
    transition: none;
  }
  .ha-zeile:active,
  .sk-chip:active {
    transform: none;
  }
}