@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(sora-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(sora-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
:root {
  --schrift:
    "Sora",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1180px;
  --text: clamp(18px, 0.6vw + 15px, 22px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --grund: #C59A63;
  --papier: #FFFDF9;
  --papier-2: #F4EEE3;
  --stift: #1E2A3E;
  --stift-2: #44526B;
  --akzent: #FF6F5E;
  --akzent-kante: #B9442F;
  --akzent-text: #2A0D07;
  --markierung: rgba(255, 200, 97, .75);
  --gut-papier: #CDEFD9;
  --gut-kante: #157A43;
  --gut-tief: #0F4D2C;
  --tipp-papier: #FFE7B0;
  --tipp-tief: #5A3A00;
  --fokus: #1E2A3E;
  --schild: #D6AA70;
  --schild-kante: #8C6234;
  --schild-text: #1E2A3E;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--schrift);
  font-size: var(--text);
  line-height: 1.55;
  color: var(--stift);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
}
button {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 4px solid var(--fokus);
  outline-offset: 4px;
  border-radius: 6px;
}
.sprung {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 50;
  background: var(--papier);
  color: var(--stift);
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
}
.sprung:focus {
  top: 12px;
}
.kopfleiste,
main,
.fuss {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.kopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: clamp(14px, 2.4vw, 28px);
  padding-bottom: 8px;
}
main {
  padding-bottom: 48px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 16px 6px 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  background: var(--papier);
  color: var(--stift);
  border-radius: 8px;
}
.marke img {
  width: 36px;
  height: auto;
}
.hinweis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--hinweis, var(--stift));
  background: none;
  box-shadow: none;
  transform: none;
  border: 0;
  padding: 0;
}
.hinweis img {
  width: 24px;
  height: auto;
}
.kopfleiste .zurueck {
  margin-right: auto;
}
.seite-start .kopfleiste .stufe-marke {
  margin-right: auto;
}
.streifen {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-size: clamp(30px, 3.4vw + 14px, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  padding: .18em .55em .24em;
  background: var(--papier);
  color: var(--stift);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.streifen.klein {
  font-size: clamp(24px, 1.6vw + 16px, 36px);
}
.unterzeile {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 16px;
  font-size: clamp(19px, .6vw + 16px, 24px);
  font-weight: 600;
  line-height: 1.4;
  background: var(--papier);
  color: var(--stift-2);
  border-radius: 6px;
}
.schild {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 24px;
  font-size: clamp(18px, .4vw + 16px, 20px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--schild-text);
  background: var(--schild);
  text-decoration: none;
  border: 2px solid var(--schild-kante);
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform .1s var(--ease),
    box-shadow .1s var(--ease),
    background-color .15s;
}
.schild.klein {
  min-height: 44px;
  padding: 6px 16px;
  font-size: 17px;
}
.schild.gross {
  min-height: 62px;
  padding: 12px 30px;
  font-size: clamp(20px, .6vw + 17px, 24px);
}
.schild.primaer {
  color: var(--akzent-text);
  background: var(--akzent);
  border-color: var(--akzent-kante);
}
.schild.ruhig {
  cursor: default;
  color: var(--stift-2);
  background: var(--papier-2);
  border-style: dashed;
  border-color: var(--stift-2);
  box-shadow: none;
}
.start-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 40px);
  margin-top: 10px;
}
.buehne {
  position: relative;
  flex: 0 1 auto;
  width: min(100%, calc(45vh * 1.75));
  min-width: min(100%, 320px);
  container-type: inline-size;
}
.start-titel {
  flex: 1 1 260px;
}
.szene {
  position: relative;
  aspect-ratio: 1344 / 768;
  width: 100%;
}
.szene-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.raki-knopf {
  position: absolute;
  right: 1.5%;
  bottom: -5%;
  height: 96%;
  aspect-ratio: 408 / 612;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.raki-knopf picture,
.raki-knopf img {
  display: block;
  width: 100%;
  height: 100%;
}
.raki-voll {
  object-fit: contain;
  transform-origin: 50% 92%;
  filter: drop-shadow(8px 12px 10px rgba(30, 18, 6, .42));
  animation: wippen 4.5s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wippen {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
.raki-knopf.hopst .raki-voll {
  animation: hopsen .6s var(--ease), wippen 4.5s ease-in-out .6s infinite alternate;
}
@keyframes hopsen {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-7%) rotate(-3deg);
  }
  70% {
    transform: translateY(0) rotate(2deg);
  }
  100% {
    transform: none;
  }
}
.raki-knopf:focus-visible {
  outline-offset: -4px;
}
.blase {
  position: relative;
  background: var(--papier);
  color: var(--stift);
  font-weight: 700;
  line-height: 1.38;
  padding: 16px 22px;
  border-radius: 22px;
}
.raki-blase {
  position: absolute;
  z-index: 3;
  right: 37%;
  top: 6%;
  width: 44%;
  font-size: clamp(16px, 3.4cqi, 26px);
}
.tipp-faehnchen {
  position: absolute;
  left: -38%;
  top: 8%;
  z-index: 3;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--stift);
  background: var(--papier);
  border-radius: 6px;
  box-shadow: 0 8px 14px -8px rgba(30, 18, 6, .55);
  transform: rotate(-6deg);
  animation: winken 2.4s ease-in-out infinite;
}
.tipp-faehnchen::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 0 3px 0 0;
}
.raki-knopf[aria-expanded=true] .tipp-faehnchen {
  display: none;
}
@keyframes winken {
  0%, 80%, 100% {
    transform: rotate(-6deg);
  }
  88% {
    transform: rotate(-11deg);
  }
  94% {
    transform: rotate(-2deg);
  }
}
.raki-blase::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 30%;
  width: 24px;
  height: 24px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 0 4px 0 0;
}
.start-titel .unterzeile {
  margin-top: 12px;
}
.reihen-raster {
  list-style: none;
  margin-top: clamp(22px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.reihe-karte > a,
.reihe-karte > .karte-innen {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
  min-height: 176px;
  height: 100%;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: var(--stift);
}
.reihe-nr {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.reihe-titel {
  font-size: clamp(22px, .8vw + 18px, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  align-self: center;
}
.reihe-kurz {
  grid-column: 2;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--stift-2);
}
.reihe-stand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--stift-2);
}
.punkte {
  display: inline-flex;
  gap: 6px;
}
.punkt {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--stift-2);
  background: var(--papier);
}
.punkt.an {
  background: var(--gut-kante);
  border-color: var(--gut-tief);
}
.reihen-raster {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-top: clamp(18px, 2.4vw, 30px);
}
@media (min-width: 600px) {
  .reihe-karte.erste {
    grid-column: span 2;
  }
}
.reihe-karte.erste > a {
  min-height: 210px;
  padding-right: clamp(110px, 30%, 190px);
}
.reihe-karte.erste .reihe-titel {
  font-size: clamp(26px, 1.2vw + 20px, 34px);
}
.karte-raki {
  position: absolute;
  right: 14px;
  top: 14px;
  width: clamp(80px, 22%, 128px);
  transform: rotate(6deg);
  filter: drop-shadow(4px 7px 6px rgba(30, 18, 6, .35));
}
.los-schild {
  position: absolute;
  right: 14px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 800;
  color: var(--akzent-text);
  background: var(--akzent);
  border: 2px solid var(--akzent-kante);
  border-radius: 10px;
}
.reihe-karte.bald > .karte-innen {
  min-height: 0;
  padding: 16px 16px 14px;
  column-gap: 12px;
}
.reihe-karte.bald .reihe-nr {
  width: 42px;
  height: 42px;
  font-size: 21px;
}
.reihe-karte.bald .reihe-titel {
  font-size: 20px;
}
.reihe-karte.bald .reihe-kurz {
  font-size: 17px;
}
@media (max-width: 599px) {
  .reihe-karte.erste > a {
    padding-right: 88px;
  }
  .karte-raki {
    width: 66px;
    top: 12px;
    right: 12px;
  }
  .los-schild {
    position: static;
    grid-column: 1 / -1;
    justify-self: end;
    margin: 12px -66px 0 0;
  }
}
.bald-stempel {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 10px;
  display: inline-block;
  padding: 4px 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 3px solid currentColor;
  border-radius: 6px;
  transform: rotate(-3deg);
}
.neu-anfangen {
  margin-top: clamp(36px, 5vw, 56px);
}
.leise-link {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--stift-2);
  background: var(--papier);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.neu-frage,
.neu-erledigt {
  margin-top: 12px;
  padding: 16px 20px;
  max-width: 560px;
  background: var(--papier);
  border-radius: 8px;
}
.neu-frage p,
.neu-erledigt {
  font-size: 18px;
  font-weight: 700;
}
.neu-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.reihe-kopf {
  margin-top: 8px;
}
.stationen-liste {
  list-style: none;
  margin-top: clamp(22px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.station-karte > a,
.station-karte > .karte-innen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--stift);
}
.station-bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.station-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.station-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px 20px;
}
.station-nr {
  font-size: 16px;
  font-weight: 700;
  color: var(--stift-2);
}
.station-titel {
  font-size: clamp(21px, .6vw + 18px, 26px);
  font-weight: 800;
  line-height: 1.2;
}
.station-karte.bald .karte-innen {
  padding: 6px 0 18px;
}
.station-karte.bald .bald-stempel {
  margin: 4px 20px 0;
  align-self: flex-start;
}
.haken-kasten {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--papier);
  border: 3px dashed var(--stift-2);
  color: transparent;
}
.haken-zeichen {
  width: 70%;
  height: 70%;
}
.ist-geschafft .haken-kasten {
  background: var(--gut-kante);
  border: 3px solid var(--gut-tief);
  color: #fff;
}
.haken-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.abzeichen-feld {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 48px);
  padding: 20px 24px;
  background: var(--papier);
}
.abzeichen {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: 50%;
  background: #1E2A3E;
  box-shadow:
    0 0 0 5px #1E2A3E,
    0 0 0 9px var(--papier),
    0 0 0 13px #9AA3B5;
  filter: grayscale(1);
  opacity: .75;
}
.abzeichen img {
  width: 64px;
}
.verdient .abzeichen {
  filter: none;
  opacity: 1;
  box-shadow:
    0 0 0 5px #1E2A3E,
    0 0 0 9px var(--papier),
    0 0 0 13px var(--akzent);
}
.abzeichen-text {
  flex: 1 1 220px;
}
.abzeichen-name {
  font-size: clamp(21px, .6vw + 18px, 26px);
  font-weight: 800;
}
.abzeichen-stand {
  font-size: 18px;
  font-weight: 600;
  color: var(--stift-2);
}
.verdient .abzeichen-stand {
  color: var(--gut-tief);
}
.station > .streifen {
  margin-top: 10px;
}
.geschichte {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(22px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 900px) {
  .geschichte {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}
.bild-rahmen img {
  width: 100%;
  aspect-ratio: 1152 / 896;
  object-fit: cover;
}
.karteikarte {
  position: relative;
  padding: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 36px);
  background: var(--papier);
}
.karteikarte p {
  font-size: var(--text);
  line-height: 1.65;
  font-weight: 500;
}
.karteikarte p + p {
  margin-top: .8em;
}
.merksatz {
  position: relative;
  margin-top: clamp(30px, 5vw, 56px);
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 2.4vw, 32px);
  padding: clamp(22px, 3vw, 36px) clamp(22px, 4vw, 48px);
  background: var(--papier);
}
.merksatz-raki {
  width: clamp(84px, 10vw, 150px);
  flex: none;
  transform: rotate(-6deg);
  filter: drop-shadow(5px 8px 7px rgba(30, 18, 6, .35));
}
.merksatz-inhalt {
  flex: 1 1 auto;
  min-width: 0;
}
.merksatz-zitat {
  margin-top: 16px;
  font-size: var(--text);
  font-weight: 600;
  line-height: 1.5;
  color: var(--stift-2);
}
@media (max-width: 599px) {
  .merksatz {
    flex-direction: column;
    align-items: flex-start;
  }
  .merksatz-raki {
    width: 84px;
    margin-bottom: -6px;
  }
}
.merksatz-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stift-2);
}
.merksatz-label img {
  width: 40px;
  height: auto;
}
.merksatz-text {
  margin-top: 10px;
  font-size: clamp(30px, 3.2vw + 16px, 56px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--stift);
}
.mission {
  margin-top: clamp(34px, 5vw, 64px);
}
.frage {
  margin-top: 20px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--papier);
}
.frage-nr {
  font-size: 16px;
  font-weight: 700;
  color: var(--stift-2);
}
.frage-text {
  margin-top: 6px;
  font-size: clamp(22px, 1vw + 17px, 30px);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: pretty;
}
.frage-text:focus {
  outline: none;
}
.antworten {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
@media (min-width: 900px) {
  .antworten {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
.antwort {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 66px;
  padding: 14px 20px;
  text-align: left;
  font-size: clamp(19px, .5vw + 16px, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--schild-text);
  background: var(--schild);
  border: 2px solid var(--schild-kante);
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform .1s var(--ease),
    box-shadow .1s var(--ease),
    background-color .15s;
}
.antwort.richtig {
  background: var(--gut-papier);
  border-color: var(--gut-kante);
  color: var(--gut-tief);
}
.antwort.versucht {
  background: var(--papier-2);
  border-style: dashed;
  border-color: var(--stift-2);
  color: var(--stift-2);
  box-shadow: none;
  cursor: default;
}
.antwort:disabled {
  cursor: default;
  opacity: .62;
  box-shadow: none;
  transform: none;
}
.antwort.richtig:disabled {
  opacity: 1;
}
.rueckmeldung {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 18px;
}
.rueckmeldung:not(.gut):not(.tipp) {
  display: none;
}
.rueck-kopf {
  width: 76px;
  flex: none;
  transform: rotate(-6deg);
  filter: drop-shadow(4px 6px 6px rgba(30, 18, 6, .3));
}
.erklaerung {
  padding: 14px 20px;
  border-radius: 18px 18px 18px 6px;
  font-size: var(--text);
  font-weight: 600;
  line-height: 1.45;
}
.erklaerung-richtig {
  background: var(--gut-papier);
  color: var(--gut-tief);
}
.erklaerung-falsch {
  background: var(--tipp-papier);
  color: var(--tipp-tief);
}
.weiter-frage {
  margin-top: 18px;
}
.geschafft {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 48px);
  padding: 20px 24px;
  background: var(--papier);
}
.haken-stempel {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 50%;
  border: 4px dashed var(--stift-2);
  color: transparent;
  background: var(--papier);
}
.haken-stempel .haken-zeichen {
  width: 64%;
  height: 64%;
}
.geschafft-text {
  flex: 1 1 220px;
  font-size: clamp(20px, .6vw + 17px, 26px);
  font-weight: 800;
  color: var(--stift-2);
}
.geschafft-raki {
  display: none;
  width: 84px;
  flex: none;
  transform: rotate(-6deg);
  filter: drop-shadow(4px 7px 6px rgba(30, 18, 6, .35));
}
.ist-geschafft .geschafft-raki {
  display: block;
}
.ist-geschafft .haken-stempel {
  width: 104px;
  height: 104px;
  border: 0;
  color: #fff;
  transform: rotate(-9deg);
  background: var(--gut-kante);
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 8px var(--gut-tief),
    0 12px 16px -6px rgba(20, 30, 20, .5);
}
.ist-geschafft .geschafft-text {
  color: var(--gut-tief);
}
.frisch .haken-stempel {
  animation: klatsch .55s cubic-bezier(.2, 1.6, .4, 1) both;
}
.frisch .geschafft-raki {
  animation: hopsen .6s var(--ease) .25s both;
}
@keyframes klatsch {
  0% {
    transform: scale(2.4) rotate(-30deg);
    opacity: 0;
  }
  55% {
    transform: scale(.88) rotate(-6deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-9deg);
  }
}
.hilfe {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--papier);
  border-left: 8px solid var(--akzent);
}
.hilfe p {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}
.hilfe-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.weiter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  align-items: center;
  margin-top: clamp(30px, 4vw, 44px);
}
.eltern {
  position: relative;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(24px, 4vw, 44px);
  background: #FFFFFF;
  color: #1E2A3E;
  border-top: 6px solid #1E2A3E;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1.6;
}
.eltern h2 {
  font-size: clamp(24px, 1vw + 19px, 32px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.eltern h3 {
  margin-top: 24px;
  font-size: 21px;
  font-weight: 800;
}
.eltern p,
.eltern li {
  max-width: 70ch;
}
.eltern > p {
  margin-top: 12px;
}
.eltern a {
  color: #1D4E89;
  font-weight: 700;
  text-underline-offset: 3px;
}
.eltern-aufgabe {
  margin-top: 16px;
  padding: 18px 22px;
  background: #F3F6FA;
  border-radius: 6px;
}
.eltern-aufgabe h3 {
  margin-top: 0;
}
.eltern-klein {
  font-size: 16px;
  font-weight: 700;
  color: #44526B;
  margin-top: 12px;
}
.vorlesen-text {
  font-size: 19px;
  font-style: italic;
}
.eltern-frage {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
}
.eltern-frage .eltern-klein {
  display: block;
  margin: 0;
}
.eltern-fragen,
.eltern-punkte {
  margin-top: 8px;
  padding-left: 1.3em;
}
.eltern-fragen li + li,
.eltern-punkte li + li {
  margin-top: 8px;
}
.eltern-aufgabe > p:last-child {
  margin-top: 12px;
}
.eltern-blatt {
  margin-top: 18px;
}
.eltern .schild {
  color: #1E2A3E;
  text-decoration: none;
}
.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  padding-top: 8px;
  padding-bottom: 32px;
}
.fuss-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--stift);
  background: var(--papier);
  border-radius: 6px;
}
@media (max-width: 700px) {
  .raki-knopf {
    height: 100%;
    bottom: -8%;
    right: 0;
  }
  .raki-blase {
    position: relative;
    right: auto;
    top: auto;
    width: auto;
    margin: 8% 0 0;
  }
  .raki-blase::after {
    right: 22%;
    bottom: auto;
    top: -10px;
    border-radius: 4px 0 0 0;
  }
  .raki-blase {
    font-size: 18px;
  }
  .tipp-faehnchen {
    left: -52%;
    top: 4%;
  }
  .reihe-karte > a,
  .reihe-karte > .karte-innen {
    min-height: 0;
  }
  .weiter-nav .schild {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (min-width: 900px) {
  .geschichte .bild-rahmen {
    position: sticky;
    top: 20px;
  }
}
:root {
  --sterne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='%23F4F3EF'%3E%3Ccircle cx='84' cy='96' r='1.4' opacity='.75'/%3E%3Ccircle cx='402' cy='52' r='1' opacity='.5'/%3E%3Ccircle cx='611' cy='188' r='1.8' opacity='.8'/%3E%3Ccircle cx='250' cy='311' r='1' opacity='.45'/%3E%3Ccircle cx='532' cy='430' r='1.2' opacity='.55'/%3E%3Ccircle cx='38' cy='502' r='1' opacity='.4'/%3E%3Ccircle cx='688' cy='604' r='1' opacity='.45'/%3E%3Ccircle cx='331' cy='640' r='1.5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}
html {
  background: #11172C;
}
.kopf-band {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--sterne) 120px 60px / 560px 560px repeat, rgba(5, 8, 19, .82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(185, 164, 255, .2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf-band {
    background-color: rgba(5, 8, 19, .94);
  }
}
.kopf-band .kopfleiste {
  padding-top: 12px;
  padding-bottom: 12px;
}
.ml-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #F4F3EF;
  text-decoration: none;
}
.ml-marke img {
  width: 30px;
  height: auto;
}
.kopf-band .zurueck {
  margin-right: 0;
}
.kopf-band .stufe-marke {
  margin-right: auto;
  color: #F3E6C6;
  text-shadow: none;
}
.kopf-hilfe {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #F4F3EF;
  text-decoration: underline;
  text-decoration-color: #FF6F5E;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.sprung {
  z-index: 60;
}
@media (max-width: 560px) {
  .ml-marke span {
    display: none;
  }
  .kopf-band .stufe-marke {
    display: none;
  }
  .kopf-band .zurueck {
    margin-right: auto;
  }
}
.fuss-band {
  position: relative;
  margin-top: clamp(110px, 12vw, 170px);
  background: var(--sterne) 260px 140px / 560px 560px repeat, #020309;
  border-top: 1px solid rgba(185, 164, 255, .2);
}
.fuss-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(110px, 12vw, 170px);
  pointer-events: none;
  background:
    radial-gradient(
      55% 100% at 50% 100%,
      rgba(138, 107, 255, .3),
      transparent 72%),
    radial-gradient(
      28% 70% at 30% 100%,
      rgba(255, 111, 94, .18),
      transparent 72%),
    radial-gradient(
      26% 64% at 72% 100%,
      rgba(90, 150, 255, .2),
      transparent 72%);
}
.fuss-band .fuss {
  padding-top: 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.fuss-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 19px;
  font-weight: 800;
  color: #F4F3EF;
  text-decoration: none;
}
.fuss-marke img {
  width: 26px;
  height: auto;
}
.fuss-klein {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  width: 100%;
}
.fuss-klein a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: #B4C0E4;
}
.vorlesen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 12px;
  padding: 6px 18px 6px 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--schild-text);
  background: var(--schild);
  border: 2px solid var(--schild-kante);
  border-radius: 12px;
  cursor: pointer;
}
.vorlesen-zeichen {
  width: 26px;
  height: 26px;
  flex: none;
}
.vorlesen.spielt {
  color: var(--akzent-text);
  background: var(--akzent);
  border-color: var(--akzent-kante);
}
.vorlesen.spielt .welle {
  animation: welle 1s ease-in-out infinite;
}
@keyframes welle {
  50% {
    opacity: .25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vorlesen.spielt .welle {
    animation: none;
  }
}
.vorlesen-bald {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 12px;
  padding: 4px 14px 4px 10px;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  opacity: .72;
  border: 2px dashed currentColor;
  border-radius: 12px;
}
.vorlesen-bald .vorlesen-zeichen {
  width: 22px;
  height: 22px;
  flex: none;
}
.vorlesen-bald .vorlesen-text {
  font-size: 16px;
}
.raki-blase .vorlesen {
  margin-top: 10px;
}
.raki-sagt {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 18px;
  max-width: 720px;
}
.raki-sagt img {
  width: clamp(70px, 8vw, 96px);
  flex: none;
  transform: rotate(-6deg);
  filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, .35));
}
.raki-sagt .blase {
  border-radius: 22px 22px 22px 6px;
  font-size: var(--text);
}
.karteikarte p {
  font-size: clamp(21px, .5vw + 18px, 24px);
}
.js .g-karte {
  display: none;
}
.js .g-karte.an {
  display: block;
  animation: karte-rein .25s var(--ease);
}
@keyframes karte-rein {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .g-karte.an {
    animation: none;
  }
}
.g-karte p:focus {
  outline: none;
}
.karten-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
}
.karten-punkte {
  display: flex;
  gap: 8px;
}
.kp {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--papier-2);
  border: 2px solid var(--stift-2);
}
.kp.an {
  background: var(--akzent);
  border-color: var(--akzent-kante);
}
.karten-stand {
  font-size: 16px;
  font-weight: 700;
  color: var(--stift-2);
  margin-right: auto;
}
#mission-titel {
  scroll-margin-top: 110px;
}
.frage-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
.frage-kopf .vorlesen {
  margin-top: 8px;
}
.erklaerung p + .vorlesen {
  margin-top: 10px;
}
.weiter-nav.noch-offen .schild.primaer {
  color: var(--stift-2);
  background: var(--papier-2);
  border-color: var(--stift-2);
  border-style: dashed;
  box-shadow: none;
}
.anruf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 18px;
  font-size: 18px;
  font-weight: 800;
  color: #12432B;
  background: #E4F4EA;
  border: 3px solid #2F8F5B;
  border-radius: 24px;
  text-decoration: none;
}
.anruf svg {
  width: 22px;
  height: 22px;
}
.hilfe-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 18px;
  font-weight: 700;
  color: var(--stift);
}
.hilfe-wege {
  align-items: center;
}
.merksatz-label,
.bald-stempel {
  text-transform: none;
  letter-spacing: 0;
}
.abzeichen.mit-patch {
  width: 150px;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.abzeichen.mit-patch img.patch {
  width: 150px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}
.abzeichen-feld:not(.verdient) .vorlesen,
.abzeichen-feld:not(.verdient) .feier-raki {
  display: none;
}
.abzeichen-feld {
  position: relative;
}
.feier-raki {
  width: 92px;
  height: auto;
  flex: none;
  filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, .3));
}
.feier .abzeichen {
  animation: abzeichen-rein 1s var(--ease) both;
}
.feier .feier-raki {
  animation: hopsen .6s var(--ease) .9s 2;
}
@keyframes abzeichen-rein {
  0% {
    transform: translateY(-120px) scale(.3) rotate(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateY(8px) scale(1.15) rotate(8deg);
    opacity: 1;
  }
  80% {
    transform: scale(.95) rotate(-3deg);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feier .abzeichen,
  .feier .feier-raki {
    animation: none;
  }
}
.jacke {
  margin-top: clamp(30px, 4vw, 48px);
}
.jacke-reihe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 18px 14px;
  margin-top: 18px;
  padding: 22px 18px;
  background: var(--karton-dunkel, #1C2440);
  border-radius: 10px;
}
.jacke-platz {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.jacke-bild {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px dashed rgba(243, 230, 198, .45);
}
.jacke-bild img {
  width: 96px;
  height: auto;
}
.jacke-nr {
  font-size: 30px;
  font-weight: 800;
  color: rgba(243, 230, 198, .55);
}
.jacke-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(243, 230, 198, .7);
}
.jacke-platz:not(.verdient) .jacke-bild img {
  filter: grayscale(1) brightness(.55);
  opacity: .7;
}
.jacke-platz.verdient .jacke-bild {
  border: 0;
}
.jacke-platz.verdient .jacke-name {
  color: #F3E6C6;
}
#abzeichen,
.jacke {
  scroll-margin-top: 110px;
}
.weiter-mit {
  margin-top: 18px;
  max-width: 32rem;
}
.weiter-gruss {
  margin: 0 0 14px;
  font-size: var(--text);
}
.weiter-link {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .3em;
  text-align: center;
}
.weiter-mit .vorlesen {
  display: flex;
  width: max-content;
}
button.karte-innen {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
}
.reihe-karte.bald,
.station-karte.bald {
  position: relative;
}
.bald-blase {
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 10px;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  font-size: 16px;
  line-height: 1.3;
  box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .7);
  cursor: pointer;
}
.bald-blase[hidden] {
  display: none;
}
.bald-blase p {
  flex: 1 1 auto;
  margin: 0;
}
.bald-blase .vorlesen {
  flex: none;
  justify-content: center;
  width: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.bald-blase .vorlesen-text {
  display: none;
}
.bald-knopf.wackelt {
  animation: wackeln .5s var(--ease);
}
@keyframes wackeln {
  25% {
    transform: rotate(-1.4deg);
  }
  60% {
    transform: rotate(1deg);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bald-knopf.wackelt {
    animation: none;
  }
}
@media (max-width: 360px) {
  .los-schild {
    margin-right: 0;
  }
}
.antwort.mit-bild {
  gap: 14px;
  padding: 10px 16px 10px 10px;
}
.antwort-bild {
  flex: none;
  width: 112px;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: #F3EBDD;
}
@media (min-width: 900px) {
  .antwort.mit-bild {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 10px 16px;
    text-align: center;
  }
  .antwort.mit-bild .antwort-bild {
    width: 100%;
  }
  .antwort.mit-bild .antwort-text {
    padding: 0 6px;
  }
}
.antwort.versucht .antwort-bild,
.antwort:disabled:not(.richtig) .antwort-bild {
  filter: grayscale(.7);
  opacity: .7;
}
.name-feld,
.name-gruss {
  margin-top: 18px;
  max-width: 32rem;
}
.name-frage {
  display: block;
  font-size: clamp(20px, .6vw + 17px, 24px);
  font-weight: 800;
}
.name-hinweis {
  margin: 4px 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--stift-2);
}
.name-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.name-zeile input {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 52px;
  padding: 8px 14px;
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  color: var(--stift);
  background: #FFFFFF;
  border: 3px solid var(--stift-2);
  border-radius: 10px;
}
.name-zeile input:focus {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-color: var(--stift);
}
.name-zeile input[aria-invalid=true] {
  border-color: var(--akzent-kante);
}
.name-fehler {
  margin-top: 8px;
  font-size: 16px;
  color: var(--akzent-kante);
}
.name-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 10px;
}
.name-unten .vorlesen {
  margin-top: 0;
}
.name-gruss p {
  margin: 0 0 6px;
  font-size: var(--text);
}
.urkunde-weg {
  margin-top: 18px;
}
.urkunde-seite {
  padding-block: clamp(20px, 4vw, 48px);
}
.urkunde {
  position: relative;
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px);
  text-align: center;
  color: var(--stift);
  background: var(--papier);
  border: 3px solid var(--karton-kante);
  border-radius: 10px;
  box-shadow:
    0 0 0 10px var(--papier),
    0 0 0 13px var(--akzent),
    0 24px 40px -18px rgba(0, 0, 0, .7);
}
.urkunde-raki {
  position: absolute;
  right: clamp(-10px, 2vw, 24px);
  top: clamp(-40px, -3vw, -20px);
  width: clamp(84px, 14vw, 150px);
  height: auto;
  filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, .3));
}
@media (max-width: 599px) {
  .urkunde-raki {
    position: static;
    display: block;
    width: 92px;
    margin: -6px auto 6px;
  }
}
.urkunde-ueber {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--stift-2);
}
.urkunde-titel {
  margin-top: 6px;
  font-size: clamp(44px, 6vw + 16px, 84px);
  font-weight: 900;
  line-height: 1;
}
.urkunde-fuer {
  margin-top: 14px;
  font-size: clamp(22px, 1.4vw + 16px, 34px);
  font-weight: 800;
}
.urkunde-fuer .kind-name {
  color: var(--akzent-kante);
}
.urkunde-text {
  max-width: 34rem;
  margin: 14px auto 0;
  font-size: var(--text);
}
.urkunde-abzeichen {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}
@media (min-width: 760px) {
  .urkunde-abzeichen {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.urkunde-datum {
  margin-top: 20px;
  font-size: 16px;
  color: var(--stift-2);
}
.urkunde-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    background: #FFFFFF !important;
  }
  .urkunde-seite {
    padding: 0 !important;
    margin: 0 !important;
  }
  .urkunde {
    max-width: none;
    width: 100%;
    min-height: 182mm;
    margin: 0;
    padding: 10mm 16mm 8mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .urkunde-raki {
    width: 34mm;
    top: 8mm;
    right: 12mm;
    filter: none;
  }
  .urkunde-ueber {
    font-size: 10pt;
  }
  .urkunde-titel {
    margin-top: 2mm;
    font-size: 52pt;
  }
  .urkunde-fuer {
    margin-top: 4mm;
    font-size: 24pt;
  }
  .urkunde-text {
    margin-top: 3mm;
    font-size: 13pt;
  }
  .urkunde-abzeichen {
    margin-top: 5mm;
    padding: 4mm 3mm;
    gap: 2mm;
  }
  .urkunde-abzeichen .jacke-bild,
  .urkunde-abzeichen .jacke-bild img {
    width: 26mm;
    height: 26mm;
  }
  .urkunde-abzeichen .jacke-nr {
    font-size: 16pt;
  }
  .urkunde-abzeichen .jacke-name {
    font-size: 10pt;
  }
  .urkunde-datum {
    margin-top: 4mm;
    font-size: 10pt;
  }
  body {
    background: #FFFFFF !important;
  }
  body::before,
  .kopf-band,
  .fuss-band,
  .urkunde-knoepfe,
  .sprung {
    display: none !important;
  }
  .urkunde {
    box-shadow: none;
    border: 3px solid #1E2A3E;
  }
  .urkunde-abzeichen {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #FFFFFF;
    border: 2px solid #1E2A3E;
  }
  .urkunde-abzeichen .jacke-name,
  .urkunde-abzeichen .verdient .jacke-name {
    color: #1E2A3E !important;
  }
  .urkunde-abzeichen .jacke-nr {
    color: #9AA3B5 !important;
  }
  .urkunde-abzeichen .jacke-platz:not(.verdient) .jacke-bild {
    border-color: #B7BECE;
  }
}
.extras {
  margin-top: clamp(36px, 5vw, 56px);
}
.extra-raster {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.extra-karte a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 16px;
  height: 100%;
  padding: 16px 18px;
  color: var(--schild-text);
  text-decoration: none;
  background: var(--schild);
  border: 2px solid var(--schild-kante);
  border-radius: 10px;
}
.extra-bild {
  grid-row: 1 / span 3;
  display: flex;
  gap: 4px;
}
.mini-taste {
  display: grid;
  place-items: center;
  width: 34px;
  height: 36px;
  font-size: 18px;
  font-weight: 800;
  color: var(--stift);
  background: var(--papier);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--karton-kante);
}
.extra-titel {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}
.extra-kurz {
  font-size: 16px;
  font-weight: 600;
  opacity: .9;
}
.extra-stand {
  font-size: 14px;
  font-weight: 800;
  opacity: .8;
}
.extra-karte.ist-gespielt .extra-stand::before {
  content: "✓ ";
}
.buchstaben {
  padding-bottom: 20px;
}
.bs {
  margin-top: 20px;
}
.bs-start,
.bs-fertig {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 22px;
  max-width: 46rem;
  font-size: var(--text);
}
.bs-start > div,
.bs-fertig > div {
  flex: 1 1 18rem;
}
.bs-start p + p,
.bs-fertig p {
  margin-top: 8px;
}
.bs-klein {
  font-size: 16px;
  color: var(--stift-2);
}
.bs-raki {
  width: clamp(90px, 14vw, 130px);
  height: auto;
  flex: none;
}
.bs-start .schild.gross {
  margin-top: 16px;
}
.bs-fertig h2 {
  font-size: clamp(26px, 2vw + 18px, 36px);
  font-weight: 900;
}
.bs-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.bs-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bs-stand {
  font-size: 16px;
  font-weight: 800;
  color: #F3E6C6;
}
.bs-sprechen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bs-sprechen[aria-pressed=true] {
  color: var(--akzent-text);
  background: var(--akzent);
  border-color: var(--akzent-kante);
}
.bs-sprechen .vorlesen-zeichen,
.bs-sprechen svg {
  width: 22px;
  height: 22px;
}
.bs-karte {
  position: relative;
  margin-top: 12px;
  padding: clamp(16px, 3vw, 28px);
  text-align: center;
  color: var(--stift);
  background: var(--papier);
  border-radius: 12px;
}
.bs-aufgabe {
  font-size: clamp(20px, .8vw + 16px, 26px);
  font-weight: 800;
}
.bs-aufgabe:focus {
  outline: none;
}
.bs-gross {
  margin-top: 6px;
  font-size: clamp(60px, 5vw + 34px, 96px);
  font-weight: 900;
  line-height: 1;
  color: var(--stift);
}
.bs-gross.ist-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  font-size: clamp(40px, 5vw + 20px, 72px);
}
.bs-n {
  min-width: .8em;
  padding: 0 .08em;
  border-bottom: 6px solid transparent;
  color: var(--stift-2);
}
.bs-n.getippt {
  color: var(--gut-tief, #1F6B3A);
}
.bs-n.jetzt {
  color: var(--stift);
  border-bottom-color: var(--akzent);
}
.bs-wort {
  min-height: 1.4em;
  margin-top: 6px;
  font-size: clamp(18px, .6vw + 15px, 22px);
  font-weight: 700;
  color: var(--stift-2);
}
.bs-meldung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  margin-top: 4px;
}
.bs-meldung .rueck-kopf {
  width: 56px;
  height: auto;
}
.bs-rueck {
  font-size: 20px;
  font-weight: 800;
}
.tastatur {
  display: grid;
  gap: clamp(4px, .7vw, 8px);
  margin-top: 16px;
  padding: clamp(8px, 1.5vw, 16px);
  background: var(--karton-dunkel);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--karton-kante);
}
.tasten-reihe {
  display: flex;
  gap: clamp(3px, .6vw, 8px);
}
.tasten-reihe.reihe-3 {
  padding-left: 2.5%;
}
.taste {
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(36px, 5vw, 58px);
  padding: 0;
  font: inherit;
  font-size: clamp(14px, 1.4vw + 6px, 24px);
  font-weight: 800;
  color: var(--stift);
  background: var(--papier);
  border: 0;
  border-radius: clamp(5px, .6vw, 9px);
  box-shadow: 0 4px 0 var(--karton-kante);
  cursor: pointer;
  transition:
    transform .08s var(--ease),
    box-shadow .08s var(--ease),
    background-color .15s;
}
.taste:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--karton-kante);
}
.taste.ziffer {
  display: grid;
  place-items: center;
  opacity: .45;
  cursor: default;
  box-shadow: 0 3px 0 var(--karton-kante);
}
.taste.breit {
  flex-grow: 1.6;
}
.leertaste {
  flex: 0 1 56%;
  margin: 0 auto;
  min-height: clamp(36px, 5vw, 54px);
}
.taste.leuchtet {
  background: #FFE7A3;
}
.taste.hilft {
  background: #FFD27A;
  box-shadow:
    0 4px 0 var(--karton-kante),
    0 0 0 4px #FFD27A,
    0 0 18px 6px rgba(255, 210, 122, .7);
  animation: leuchten 1.2s ease-in-out infinite alternate;
}
@keyframes leuchten {
  to {
    box-shadow:
      0 4px 0 var(--karton-kante),
      0 0 0 4px #FFD27A,
      0 0 6px 2px rgba(255, 210, 122, .4);
  }
}
.taste.richtig {
  background: var(--gut-papier, #D7F0DD);
}
.taste.falsch {
  animation: wackeln .4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .taste.hilft,
  .taste.falsch {
    animation: none;
  }
}
.name-verwalten {
  margin-top: 14px;
  font-size: 16px;
  color: #F3E6C6;
}
.name-verwalten #name-stand:empty {
  display: none;
}
.buchstaben.spielt > h1 {
  display: none;
}
.bs.laeuft {
  margin-top: 0;
}
.bs-karte {
  padding: clamp(12px, 2vw, 22px) clamp(14px, 3vw, 28px);
}
.bs-meldung {
  position: absolute;
  top: 8px;
  right: 10px;
  min-height: 0;
  margin: 0;
  gap: 8px;
}
.bs-meldung .rueck-kopf {
  width: 44px;
}
.bs-rueck {
  font-size: 17px;
  text-align: left;
  max-width: 12em;
}
.bs-gross.ist-balken::before {
  content: "";
  display: inline-block;
  width: min(60%, 320px);
  height: .32em;
  vertical-align: middle;
  background: var(--stift);
  border-radius: 8px;
}
.bs-gross.ist-name.lang {
  font-size: clamp(30px, 3.4vw + 16px, 56px);
}
.bs-wortblock {
  display: inline-flex;
  white-space: nowrap;
}
.bs-luecke {
  display: inline-block;
  width: .7em;
  border-bottom: 6px solid var(--stift-2);
  margin: 0 .1em .12em;
}
.bs-luecke.jetzt {
  border-bottom-color: var(--akzent);
}
.taste.hilft-reihe {
  background: #FFF4D6;
}
.taste.leuchtet {
  background: #E6DCC8;
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--karton-kante);
}
.bs-fertig h2:focus,
.bs-aufgabe:focus {
  outline: none;
}
.tastatur,
.bs-karte {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 499px) {
  .tasten-reihe.reihe-1 {
    display: none;
  }
  .taste {
    min-height: 42px;
  }
}
@media (max-height: 820px) {
  .bs-gross {
    font-size: clamp(44px, 9vh, 80px);
    margin-top: 2px;
  }
  .bs-aufgabe {
    font-size: clamp(18px, 2.6vh, 22px);
  }
  .bs-wort {
    margin-top: 2px;
    min-height: 1.2em;
  }
  .taste {
    min-height: clamp(34px, 6.2vh, 54px);
  }
  .tastatur {
    margin-top: 10px;
  }
}
.bs-sprechen {
  position: relative;
}
.bs-sprechen.leise .vorlesen-zeichen {
  opacity: .5;
}
.bs-sprechen.leise::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 26px;
  height: 3px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 2px;
}
.bs-kopfzeile {
  margin-top: 8px;
}
.bs-sprechen[aria-pressed=true] {
  color: var(--schild-text);
  background: var(--schild);
  border-color: var(--schild-kante);
}
.bs-hoeren {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.karten-nav .karte-zurueck {
  margin-right: auto;
}
@media (max-width: 599px) {
  .urkunde-abzeichen {
    gap: 16px 10px;
  }
  .urkunde-abzeichen .jacke-name {
    font-size: 14px;
    hyphens: auto;
  }
}
.extra-karte.bald {
  position: relative;
}
.extra-knopf {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 16px;
  width: 100%;
  height: 100%;
  padding: 16px 18px;
  font: inherit;
  text-align: left;
  color: #F3E6C6;
  cursor: pointer;
  background: transparent;
  border: 2px dashed #56628A;
  border-radius: 10px;
}
.extra-knopf .extra-titel {
  color: #F3E6C6;
}
.extra-knopf .extra-kurz {
  color: #CFC6B4;
}
.extra-knopf .bald-stempel {
  grid-column: 2;
  margin-top: 4px;
  justify-self: start;
}
.extra-zeichen {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 28px;
  line-height: 1;
  background: var(--papier);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--karton-kante);
  filter: saturate(.8);
}
.urkunde-weg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.bordvertrag-bald {
  position: relative;
}
.bordvertrag-knopf {
  opacity: .85;
  border-style: dashed;
}
.bald-marke {
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 13px;
  font-weight: 800;
  color: #8E2F1F;
  background: rgba(255, 253, 249, .9);
  border-radius: 6px;
}
.bordvertrag-bald .bald-blase {
  left: 0;
  right: auto;
  width: min(320px, 80vw);
}
.bauplan {
  margin-top: 40px;
  padding: 14px 18px;
  font-size: 15px;
  color: #E6DCC6;
  background: rgba(12, 20, 46, .6);
  border: 2px dashed #56628A;
  border-radius: 10px;
}
.bauplan summary {
  cursor: pointer;
  font-weight: 800;
}
.bauplan h3 {
  margin-top: 12px;
  font-size: 16px;
  color: #FFD27A;
}
.bauplan ul {
  margin: 4px 0 0 1.2em;
}
@media (min-width: 900px) {
  .extra-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.himmel-ebene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hm-stern,
.sf-stern {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F7E9C4;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hm-stern {
  opacity: .9;
  animation: hm-glitzern 3.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.hm-schnuppe {
  position: absolute;
  top: 14%;
  left: -20%;
  width: 130px;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 210, 122, 0),
      #FFD27A);
  opacity: 0;
  animation: hm-schnuppe 14s ease-in 3s infinite;
  will-change: transform, opacity;
}
@keyframes hm-glitzern {
  50% {
    transform: scale(.7) rotate(18deg);
    opacity: .45;
  }
}
@keyframes hm-schnuppe {
  0%, 84% {
    opacity: 0;
    transform: translate(0, 0) rotate(14deg);
  }
  85% {
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: translate(70vw, 18vh) rotate(14deg);
  }
  100% {
    opacity: 0;
  }
}
.start-feier {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .5s;
}
.start-feier.geht {
  opacity: 0;
}
.sf-rakete {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 84px;
  margin-left: -42px;
}
.sf-wolke {
  position: absolute;
  bottom: 4px;
  width: 70px;
  height: 48px;
  border-radius: 50%;
  background: #F3EEE4;
  opacity: 0;
  box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .08);
}
.sf-jubel {
  position: absolute;
  right: 6%;
  bottom: -10px;
  width: clamp(120px, 18vw, 190px);
  height: auto;
  opacity: 0;
}
.sf-stempel {
  position: absolute;
  left: 50%;
  top: 30%;
  padding: 8px 22px;
  font-size: clamp(30px, 4vw + 14px, 52px);
  font-weight: 900;
  color: #8E2F1F;
  border: 6px solid #8E2F1F;
  border-radius: 12px;
  background: rgba(255, 253, 249, .95);
  opacity: 0;
  transform: translateX(-50%) rotate(-8deg) scale(2);
}
.sf-stern {
  width: 26px;
  height: 26px;
  opacity: 0;
}
.start-feier.spielt .sf-rakete {
  animation: sf-ruetteln .12s linear 0s 4, sf-abheben 2.2s cubic-bezier(.5, 0, .7, .4) .5s forwards;
}
.start-feier.spielt .sf-wolke {
  animation: sf-paffen 1.6s ease-out forwards;
}
.start-feier.spielt .sf-wolke.w2 {
  animation-delay: .25s;
}
.start-feier.spielt .sf-wolke.w3 {
  animation-delay: .5s;
}
.start-feier.spielt .sf-wolke.w4 {
  animation-delay: .7s;
}
.start-feier.spielt .sf-jubel {
  animation: sf-rein .7s cubic-bezier(.2, 1.5, .4, 1) 1.2s forwards, sf-jubeln .5s ease-in-out 1.9s 4 alternate;
}
.start-feier.spielt .sf-stempel {
  animation: sf-stempeln .4s cubic-bezier(.2, 1.4, .4, 1) 1.6s forwards;
}
.start-feier.spielt .sf-stern {
  animation: sf-funkeln 1.2s ease-out forwards;
}
@keyframes sf-ruetteln {
  50% {
    transform: translateX(-3px);
  }
}
@keyframes sf-abheben {
  to {
    transform: translateY(-120vh) rotate(-6deg);
  }
}
@keyframes sf-paffen {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  30% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: scale(1.7) translate(var(--dx, 0), -30px);
  }
}
@keyframes sf-rein {
  from {
    opacity: 0;
    transform: translateY(90px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sf-jubeln {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(-14px) rotate(3deg);
  }
}
@keyframes sf-stempeln {
  to {
    opacity: 1;
    transform: translateX(-50%) rotate(-8deg) scale(1);
  }
}
@keyframes sf-funkeln {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.2) rotate(40deg);
  }
  100% {
    opacity: 0;
    transform: scale(.6) rotate(90deg) translate(var(--dx), var(--dy));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-stern,
  .hm-schnuppe {
    animation: none;
  }
  .hm-schnuppe {
    display: none;
  }
  .start-feier {
    display: none !important;
  }
}
.start .start-titel {
  margin-top: 10px;
}
.start .start-titel .unterzeile {
  margin-top: 10px;
}
.start-blasen {
  flex: 1 1 260px;
  align-self: flex-end;
}
.start-blasen > :first-child {
  margin-top: 0;
}
.hilfe-seite > .streifen,
.raus-seite > .streifen {
  margin-top: 10px;
}
.hilfe-karten {
  list-style: none;
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(22px, 3vw, 36px);
  max-width: 52rem;
}
.hk {
  position: relative;
  padding: clamp(18px, 3vw, 30px) clamp(18px, 3vw, 32px);
  background: var(--papier);
  color: var(--stift);
  border-left: 10px solid var(--akzent);
  border-radius: 4px;
}
.hk h2 {
  font-size: clamp(24px, 1.2vw + 18px, 32px);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}
.hk p {
  margin-top: 10px;
  font-size: clamp(20px, .5vw + 17px, 23px);
  font-weight: 600;
  line-height: 1.5;
}
.hk .vorlesen {
  margin-top: 14px;
}
.hk-kummer {
  border-left-color: #2F8F5B;
}
.hk-gefahr {
  border-left-color: #C23B2A;
}
.hk-schuld {
  border-left-color: #FFD27A;
  padding-right: clamp(110px, 24%, 180px);
}
.hk-raki {
  position: absolute;
  right: clamp(8px, 2vw, 22px);
  bottom: 10px;
  width: clamp(84px, 16%, 140px);
  height: auto;
  filter: drop-shadow(4px 7px 6px rgba(0, 0, 0, .3));
}
.hk-zeiten {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--stift-2);
}
.hk-anruf {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.anruf-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.anruf-wer {
  font-size: 15px;
  font-weight: 700;
}
.anruf.gross {
  min-height: 76px;
  padding: 12px 28px 12px 22px;
  gap: 14px;
  border-width: 4px;
  border-radius: 40px;
}
.anruf.gross .anruf-nummer {
  font-size: clamp(34px, 3vw + 18px, 48px);
  font-weight: 900;
  letter-spacing: .02em;
}
.anruf.gross svg {
  width: 34px;
  height: 34px;
}
.anruf.notruf {
  min-height: 64px;
  color: #5E130A;
  background: #FDE3DE;
  border-color: #C23B2A;
}
.anruf.notruf .anruf-nummer {
  font-size: 30px;
  font-weight: 900;
}
@media (max-width: 599px) {
  .hk-schuld {
    padding-right: clamp(18px, 3vw, 32px);
    padding-bottom: 120px;
  }
  .hk-raki {
    width: 84px;
  }
  .anruf.gross,
  .anruf.notruf {
    width: 100%;
    justify-content: center;
  }
}
.kopf-hilfe[aria-current=page] {
  text-decoration-thickness: 4px;
}
.raus-karte {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 36px);
  margin-top: clamp(22px, 3vw, 36px);
  max-width: 52rem;
}
.raus-raki {
  width: clamp(110px, 18vw, 180px);
  height: auto;
  flex: none;
  filter: drop-shadow(5px 8px 8px rgba(0, 0, 0, .35));
}
.raus-inhalt {
  flex: 1 1 18rem;
  min-width: 0;
}
.raus-inhalt .blase {
  font-size: var(--text);
  border-radius: 22px 22px 22px 6px;
}
.raus-ziel {
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--papier);
  color: var(--stift);
  border-radius: 8px;
}
.raus-vor {
  font-size: 17px;
  font-weight: 700;
  color: var(--stift-2);
}
.raus-name {
  margin-top: 2px;
  font-size: clamp(24px, 1.2vw + 18px, 32px);
  font-weight: 800;
  line-height: 1.2;
}
.raus-adresse {
  margin-top: 6px;
  display: inline-block;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 700;
  background: var(--papier-2);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.raus-kurz {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--stift-2);
}
.raus-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 599px) {
  .raus-raki {
    width: 96px;
  }
  .raus-knoepfe .schild {
    flex: 1 1 100%;
  }
}
.zeichen-gruss {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  max-width: 32rem;
}
.zeichen-gross {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  font-size: 44px;
  line-height: 1;
  background: var(--papier-2);
  border: 3px solid var(--akzent);
  border-radius: 50%;
}
.zeichen-gruss p {
  font-size: 18px;
}
.zeichen-gruss:focus {
  outline: none;
}
.zeichen-gruss .vorlesen {
  margin-top: 8px;
}
.zeichen-feld {
  margin-top: clamp(36px, 5vw, 56px);
}
.zeichen-blase {
  margin-top: 18px;
  max-width: 40rem;
  font-size: var(--text);
}
.zeichen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.zeichen-knopf {
  display: grid;
  place-items: center;
  min-height: 72px;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  background: var(--papier-2);
  border: 3px solid var(--stift-2);
  border-radius: 14px;
}
.zeichen-knopf[aria-pressed=true] {
  background: #FFF1C9;
  border-color: var(--akzent-kante);
  box-shadow: 0 0 0 3px var(--akzent);
}
.zeichen-stand p {
  font-weight: 800;
}
.zeichen-klein {
  font-size: 1.4em;
  vertical-align: -.1em;
}
.zeichen-blase .leise-link {
  margin-top: 12px;
  background: var(--papier-2);
}
.zeichen-gruss .haken-sr {
  left: 0;
  top: 0;
}
.lieblings-seite > .streifen {
  margin-top: 10px;
}
.ls-gruppe {
  margin-top: clamp(30px, 4vw, 48px);
}
.ls-gruppe-titel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(24px, 1.2vw + 18px, 30px);
  font-weight: 800;
  line-height: 1.2;
}
.ls-zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  font-size: 26px;
  line-height: 1;
  background: var(--papier);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--karton-kante);
}
.ls-raster {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.ls-karte {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: var(--papier);
  color: var(--stift);
  border-left: 8px solid var(--akzent);
  border-radius: 4px;
}
.ls-name {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ls-kurz {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--stift-2);
}
.ls-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 14px;
}
.ls-los {
  margin-left: auto;
}
@media (max-width: 599px) {
  .ls-los {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
  }
}
.ausweis-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 13rem;
  padding: 4px 14px 4px 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--stift);
  text-decoration: none;
  background: var(--papier);
  border: 2px solid #FFD27A;
  border-radius: 24px;
}
.chip-zeichen {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  background: var(--papier-2);
  border-radius: 50%;
}
.chip-zeichen:empty {
  display: none;
}
.ausweis-chip:not(:has(.chip-zeichen:empty)) {
  padding-left: 4px;
}
.ausweis-chip:has(.chip-zeichen:empty) {
  padding-left: 14px;
}
.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ausweis-chip[aria-current=page] {
  box-shadow: 0 0 0 3px var(--akzent);
}
@media (max-width: 560px) {
  .ausweis-chip {
    max-width: 9.5rem;
    font-size: 16px;
  }
}
@media (max-width: 380px) {
  .ausweis-chip .chip-name {
    display: none;
  }
  .ausweis-chip {
    padding: 4px;
  }
  .ausweis-chip:has(.chip-zeichen:empty)::before {
    content: "🪪";
    font-size: 22px;
  }
}
.ausweis-seite > .streifen {
  margin-top: 10px;
}
.ausweis-karte {
  position: relative;
  max-width: 34rem;
  margin-top: clamp(22px, 3vw, 36px);
  padding: 18px 22px 22px;
  background: var(--papier);
  color: var(--stift);
  border-radius: 14px;
  border-top: 12px solid var(--akzent);
  box-shadow: 0 6px 0 var(--karton-kante), 0 14px 24px rgba(0, 0, 0, .25);
  transform: rotate(-1deg);
}
.ausweis-ueber {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stift-2);
}
.ausweis-inhalt {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}
.ausweis-zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 96px;
  height: 112px;
  font-size: 54px;
  line-height: 1;
  background: var(--papier-2);
  border: 3px dashed #C9BBA2;
  border-radius: 10px;
}
.ausweis-daten {
  flex: 1 1 auto;
  min-width: 0;
}
.ausweis-daten dt {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stift-2);
}
.ausweis-daten dt + dd {
  margin: 2px 0 10px;
  font-size: 24px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.ausweis-raki {
  flex: none;
  width: 76px;
  height: auto;
  align-self: flex-end;
}
.ausweis-blasen > .blase {
  margin-top: 22px;
  max-width: 34rem;
}
.ausweis-seite .zeichen-feld {
  margin-top: clamp(28px, 4vw, 44px);
}
.ausweis-seite .neu-anfangen {
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 420px) {
  .ausweis-raki {
    display: none;
  }
  .ausweis-zeichen {
    width: 78px;
    height: 92px;
    font-size: 44px;
  }
}
.urkunde-tipp {
  max-width: 40rem;
  margin-top: 18px;
  font-size: 18px;
}
@media print {
  .urkunde-tipp {
    display: none !important;
  }
}
.chip-leer {
  display: none;
}
.chip-name:empty {
  display: none;
}
.chip-name:empty + .chip-leer {
  display: inline;
}
@media (max-width: 380px) {
  .chip-leer {
    display: none !important;
  }
}
.ausweis-seite > .blase {
  max-width: 34rem;
  margin-top: 22px;
  font-size: var(--text);
}
.ausweis-seite .zeichen-feld {
  margin-top: 22px;
}
.ausweis-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 24px;
}
.ausweis-aktionen > span {
  display: contents;
}
.ausweis-aktionen > span[hidden] {
  display: none !important;
}
.ausweis-seite .neu-anfangen {
  margin-top: 0;
}
.ausweis-seite .neu-frage {
  margin-top: 14px;
}
@media (max-width: 560px) {
  .ausweis-chip .chip-name,
  .ausweis-chip .chip-leer {
    display: none !important;
  }
  .ausweis-chip {
    padding: 4px;
    min-width: 44px;
    justify-content: center;
  }
  .ausweis-chip:has(.chip-zeichen:empty)::before {
    content: "🪪";
    font-size: 22px;
  }
}
.ausweis-satz {
  display: block;
}
.ausweis-satz .vorlesen {
  margin-top: 12px;
}
.mission-aufruf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 18px;
}
.mission-aufruf .unterzeile {
  margin-top: 0;
  font-size: clamp(21px, .8vw + 17px, 28px);
  font-weight: 800;
  color: var(--stift);
}
.aufruf-pfeil {
  margin-left: 22px;
  font-size: clamp(34px, 2vw + 24px, 48px);
  font-weight: 900;
  line-height: 1;
  color: var(--papier);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  animation: aufruf 2.2s ease-in-out infinite;
}
@keyframes aufruf {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aufruf-pfeil {
    animation: none;
  }
}
.start-kopf > .start-titel {
  flex: 1 1 100%;
  margin-top: 10px;
}
@media (min-width: 900px) {
  .start-kopf {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr);
    grid-template-areas: "titel buehne" "blasen buehne";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(24px, 3vw, 44px);
    row-gap: 18px;
  }
  .start-kopf > .start-titel {
    grid-area: titel;
    margin-top: clamp(20px, 2.6vw, 40px);
  }
  .buehne {
    grid-area: buehne;
    width: 100%;
    min-width: 0;
  }
  .start-blasen {
    grid-area: blasen;
    align-self: end;
  }
  .start-kopf .streifen {
    font-size: clamp(30px, 1.8vw + 14px, 44px);
    margin-top: 0;
  }
}
:root{--ml-k:"c5a0868e86288e03"}