/* heebo-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/heebo-v26-latin-regular.woff2') format('woff2');
}

/* heebo-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/heebo-v26-latin-700.woff2') format('woff2');
}

:root {
    --body-color: #222222;
    --color-primary: rgb(187, 62, 121,1); /*#bb3e79; */
    --color-secondary: rgb(50,34,68,1);
    --color-tertiary: #f8f5ed;
    --color-forth: #ece4ce;
    --color-fifth: rgb(244,185,66);
    --text-margin: 3rem;
    --body-font-family: 'Heebo',sans-serif;
    --body-font-size: calc(1rem + .1vw);
    --link-color: #222222;
}

html {
  background: var(--color-tertiary);
  background: linear-gradient(315deg, rgb(243,239,228,0.8), var(--color-tertiary));
}

body {
  letter-spacing: 0.015em;
  background: transparent;
}

.site-grid {
  grid-gap: 0 1em;
  grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
  grid-template-areas: ". banner banner banner banner ."
                     ". top-a top-a top-a top-a ."
                     ". top-b top-b top-b top-b ."
                     ". side-l side-l side-l side-l ."
                     ". comp comp comp comp ."
                     ". side-r side-r side-r side-r ."
                     ". bot-a bot-a bot-a bot-a ."
                     ". bot-b bot-b bot-b bot-b .";
  display: grid;
}

.container-bottom-a .mod-custom, .site-grid .grid-child, .arbeiten .newsflash, .feedback .newsflash, .topmenu {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.container-header {
  background: #ffffff;
  box-shadow: inset 0 5px 5px #00000008;
  z-index: 999999!important;
}

main {
  margin-top: 0rem!important;
}

.logo img {
  max-width: 200px;
  width: 100%;
  padding-bottom: 0.2rem;
}

.breadcrumb {
  background: none;
  justify-content: flex-end;
}

.breadcrumb .icon-location {
  display: none;
}

p, td {
  font-size: calc(1rem + .1vw);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .cookiehead .headline {
  font-family: var(--body-font-family);
  color: var(--body-color);
  font-weight: 700;
  letter-spacing: 0.025em;
  margin-bottom: 1.5rem;
  line-height: 1.35;
}

h1, .h1 {
  font-size: calc(1rem + .2vw);
  line-height: 1.3;
}

h1 span {
  font-weight: 400;
}

h2, .h2 {
  font-size: calc(1.1rem + .25vw);
}

h3, .h3, h4, .h4, h6, .h6 {
  font-size: 1.1rem;
}

a:hover, .footer a {
  text-decoration:none;
}


#btn-back-to-top {
  cursor: pointer;
  background: var(--color-secondary) ;
  position: fixed;
  bottom: 18rem;
  right: calc(0.5rem  + 1.5vw);
  display:  none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  z-index: 999 !important;
  border: none;
}

#btn-back-to-top:hover {
  background: var(--body-color) ;
}

#btn-back-to-top .fas {
  padding-top:.2rem;
  font-weight: 600;
  font-size: 1.4rem;
  color: #ffffff;
}

.btn, .quizlet-item {
  font-size: calc(.92rem + .1vw);
  display: inline-block;
  background: var(--color-tertiary);
  padding: calc(.65rem + .3vw) calc(.75rem + .5vw) calc(.44rem + .3vw)  calc(.75rem + .5vw);
  border-radius: .9rem;
  border: transparent!important;
  color: var(--body-color);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  transition: all .3s;
  margin-bottom: .2rem;
  min-height: 45px;
  min-width: 90px;
}

.unit-completed .btn {
  background: var(--color-primary);
  color: #ffffff!important;
}

.btn-secondary {
  background: var(--color-forth);
}

.btn-warning {
  background: var(--color-fifth)!important;
}

.btn:hover {
  background-color: var(--body-color);
  border: transparent!important;
  color: #ffffff!important;
  transition: all .3s;
}

.fas, [class^="icon-"], [class*=" icon-"], .fa-solid {
  font-weight: 600;
  font-size: 1.2rem;
}

.fa-solid.fa-circle-v {
  background: var(--body-color);
  border-radius: 50%;
  height: 1.3rem;
  width: 1.3rem;
  font-size: 12px!important;
  font-weight: bold!important;
  position: relative;
  font-family: var(--body-font-family);
}

.fa-solid.fa-circle-v::before {
  content: "v";
  position: absolute;
  padding: .3rem .4rem;
  width: 100%;
  margin: 0rem auto;
  color: #ffffff;
}

ol, ul {
  padding-left: 1.3rem;
}

.usermenu ul, .mainmenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}

.usermenu li, .mainmenu li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: calc(0.9rem + .2vw)!important;
  width: calc(4.7rem + .5vw);
  aspect-ratio: 1;
  background: var(--color-primary);
  padding: .4rem!important;
  border-radius: 1rem;
  border: transparent!important;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  transition: all .3s;
  line-height: 1.4em;
  padding: 0.5rem;
}

.usermenu li:hover, .mainmenu li:hover{
  background: var(--body-color);
}

.usermenu li img, .mainmenu li img {
  max-width: calc(2.1rem + 0.2vw);
  padding-bottom: 0.2rem;
}

.usermenu li a, .mainmenu li a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none!important;
}

.usermenu li .image-title, .mainmenu li .image-title {
  font-size: 0.7em;
  color: #ffffff;
  display: inline-block;
  line-height: 1.2;
  white-space: wrap;
}

.footer {
  background: var(--body-color);
  margin-top: 0em;
}

/* exercises */
.login .selection-container, .registration .selection-container {
  text-align: left!important;
}

.selection-container, .exercise, .progress-container {
  max-width: 800px;
  margin: calc(.3rem + 1.2vw) auto;
  text-align:center;
}

.selection-container, #exercise-container, .exercise-container {
  padding: calc(.6rem + 1.9vw) calc(0.5rem + 1.5vw) calc(0.3rem + 1.2vw) calc(0.5rem + 1.5vw);
  background: #ffffff;
  border-radius: 1rem;
}

.guest .selection-container {
  background: transparent;
  padding: 0 calc(1.5rem + 4.5vw);
}

.selection-heading, .exercise-heading {
  max-width: 600px;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0rem auto calc(.7rem + 0.8vw) auto;
}

.selection-image, .exercise-image {
  --bbImageWidth: calc(2.5rem + .6vw);
  --bbImageHeight: calc(3.3rem + .6vw);
  position: relative;
  width: var(--bbImageWidth);  /* width of selection-image */
  height: var(--bbImageHeight); /* height of selection-image */
  min-width: 54px;
  margin-bottom: 0.3rem;
}

.selection-image::before, .exercise-image::before {
  content:"";
  position: absolute;
  width: var(--bbImageWidth);
  height: var(--bbImageHeight);
  background-image: url('../images/muntanella.png');
  background-size: var(--bbImageWidth) var(--bbImageHeight);
  top: 0rem;
  left: 0rem;
  margin-left: 0rem;
  margin-top: 0rem;
  transform: scale(0.98);
  transform-origin: bottom center;
  animation: marmot-breathe 8s ease-in-out infinite alternate;
}

/* KEYFRAMES: Definiert eine sehr kleine, langsame Skalierung */
@keyframes marmot-breathe {
  0% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.98);
  }
}


[speech-bubble], [speech-bubble] * {
    box-sizing: border-box ;
}

[speech-bubble], [speech-bubble] .title {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

[speech-bubble] .title {
  height: 100%;
  padding: var(--bbPadding);
}

[speech-bubble]::before{
  content: '';
  position: absolute;
  background: var(--bbColor);
  z-index: 3;
}

[speech-bubble]{
  --bbColor:var(--color-primary);
  --bbArrowSize: calc(1rem + 0.6vw);
  --bbBorderRadius: 1.1rem;
  --bbPadding: .4rem calc(0.4rem + 0.3vw);
  background: var(--bbColor);
  border-radius: var(--bbBorderRadius);
  position: relative;
  margin-top: calc(1rem + 1vw);
  padding: var(--bbPadding);
  max-width: 300px;
  min-width: 250px;
  min-height: 75px;
  margin-bottom: .1rem;
  animation: bubble-pop-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
  opacity: 0;
  position: relative;
  z-index: 1;
}

/* 1. KEYFRAMES: defines pop-in */
@keyframes bubble-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px); /* Startet leicht kleiner und tiefer */
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-5px); /* Federt leicht über die Zielgröße hinaus */
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0); /* Endet in der finalen Position */
  }
}

[speech-bubble] .shine-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;overflow: hidden; /* Maskiert den Glanz */
    border-radius: var(--bbBorderRadius);
    z-index: 2; /* Mittlere Ebene: über dem Glanz, aber unter dem Pfeil */
}

[speech-bubble] .shine-mask::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    z-index: 1;
    opacity: 0;

    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation:
        shine-swipe 6s ease-in-out 1s infinite, /* 1. Bewegung (Start nach 1s) */
        shine-fade-in 0.001s linear 1s forwards;
}

/* 1. KEYFRAMES: defines shine swipe */
@keyframes shine-swipe {
    0% {
        transform: translateX(-150%);
    }
    40% { /* Bewegung dauert 40% der 6s (2.4s) */
        transform: translateX(350%);
    }
    100% {
        /* Pause: Bleibt am Ende der Blase */
        transform: translateX(350%);
    }
}

/* 2. KEYFRAMES: Definiert den sofortigen Sprung zur Sichtbarkeit */
@keyframes shine-fade-in {
  to {
    opacity: 1;
  }
}

[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
[speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
[speech-bubble][pleft]  { margin-left: calc(1rem + 1vw); }
[speech-bubble][pright] { margin-right: var(--bbArrowSize); }


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before{
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* top */
[speech-bubble][ptop]::before{
  bottom: calc(100% - 2px);
}
[speech-bubble][ptop][aleft]::before{
  left: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 25% 100%)
}

/* left and right  */
[speech-bubble][pleft]::before,
[speech-bubble][pright]::before{
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
}

/* left */
[speech-bubble][pleft]::before{
  right: calc(100% - 2px);
}
[speech-bubble][pleft][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}
[speech-bubble] .title h1, [speech-bubble] .title p {
  color: #ffffff;
  margin-bottom: .1rem;
}

/* General styles for selection buttons (languages and courses) */
.selection-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.control-group .control-label, .jform_filter_search {
  width: 200px;
}

.select-course .selection-button .btn {
  width: 174px;
  aspect-ratio: 1;
}

.selection-button-description {
  font-weight: normal;
  margin-top: .5rem;
  display:inline-block;
}

.selection-button .btn, .change-selection-button .btn, .unit-start-button .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  min-height: 3.5rem;
}

.select-language .btn {
  padding: 1.5rem;
  min-width: 170px!important;
  aspect-ratio: 1 / 1;
}

.select-language .selection-button-image {
  padding: 1rem;
}

.selection-button .btn {
  min-width: 9rem;
}


.selection-button .btn:hover, .change-selection-button .btn:hover, .unit-start-button .btn:hover {
  background: var(--body-color);
  color: #ffffff;
}

.selection-button-image {
  max-width: 110px;
  padding: 1.2rem;
}

.change-selection-button {
  grid-area: side-l;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.change-selection-button .btn {
  width: 3.7rem;
  aspect-ratio: 1;
  padding: .1rem;
  font-weight: 400;
  font-size: 0.75em;
  border: 2px solid #ffffff!important;
}

.change-selection-button .btn .fas {
  padding: .1rem;
}

.units-container, .units-container-item, .choice-buttons, .complete-container {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.15rem + .45vw);
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.unit-start-button .btn {
  padding: 1rem calc(1rem + 1vw)!important;
  min-width: 60px;
  max-width: 90px;
  display: inline-flex;
}

.units-container-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .5rem;
}

.units-container-item .unit-description {
  text-align: left;
}

.choice-buttons {
  flex-direction: row;
}

.unit-title {
  font-weight: 700;
}

.units-container, .unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.orig-title {
  display: none; /* do not show on mobile */
}

/* progress bar */
.progress, .progress-stacked {
  --progress-bg: #ffffff;
  --progress-height: .6rem;
  margin-bottom: calc(0.3rem + 1vw);
}

.progress-bar {
  background-color: var(--color-primary);
}

/* overview */
.overview-container {
  text-align: left;
}

.accordion {
  --accordion-border-color: #ffffff;
  --accordion-border-radius: 0rem;
  --accordion-inner-border-radius: calc(0rem - (var(--border-width)));
  --accordion-btn-color: var(--body-color);
  --accordion-btn-bg: #ffffff;
  --accordion-active-color: var(--body-color);
  --accordion-active-bg: var(--color-tertiary);
  border-bottom: 4px solid var(--color-tertiary);
}

.accordion-button {
  font-size: calc(0.9rem + .2vw);
  font-weight: 700;
  border-top: 4px solid var(--color-tertiary);
  padding: 1rem calc(0rem + 1vw);
}

.accordion-body {
  padding: 1rem calc(0rem + 1vw);
}

.accordion-button:not(.collapsed) {
  background: #ffffff;
}
.accordion-button:not(.collapsed)::after {
  font-size: 3rem;
}

.accordion-button::after {
  font-size: 3rem;
}

.table > :not(caption) > * > * {
  padding: .5rem .3rem .5rem 0rem;
}

.modal-content {
  border-radius: 1rem;
}

.modal-header {
  background: var(--color-tertiary);
  border: none;
}

/* phrase_mc, text_mc, vocab_quiz, verb_mc */
.complete-container, .exercise-container {
  margin: 0 auto;
  padding: calc(0rem + 1vw);
  max-width: 650px;
  text-align: center;
}

.exercise-container .original {
  padding: calc(0.3rem + 0.7vw) 0rem;
  margin: 0rem;
}

.exercise-container .translation {
  font-size: 1.2em;
  font-weight: bold;
  padding: calc(0.3rem + 0.7vw) 0rem;
  margin: 0rem;
  line-height: 1.7;
}

.text-mc-container .original {
  font-size: calc(.9rem + .1vw);
}

.text-mc-container .translation {
  font-size: calc(1.1rem + .1vw);
  line-height: 1.6;
}

.word-image img {
  max-width: 140px;
}

/* verbs */
.tenses {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(.75rem + .75vw) 3rem;
}

.verb-conjugation {
  display: grid;
  gap: .5rem calc(.5rem + 1.5vw);
  grid-template-columns: 1.2fr .8fr;
}

.verb-conjugation p, .conjugation-tense-title p {
  margin: .2rem 0rem;
  font-size: calc(.9rem + .1vw);
}

/* Gap-specific styling */
.phrase-text .gap-placeholder, .vocab-quiz-translation.gap-placeholder {
    display: inline-block;
    line-height: 1.2;
}

.correct-word-span, .correct-conjugation-span, .vocab-quiz-translation .correct-translation-span {
    font-weight: bold;
    color: var(--body-color);
    border-bottom: 2px solid var(--body-color);
}

.complete-container {
  padding: 3rem;
}

/* quizlet, vocab_match */
.quizlet-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 550px;
  margin: 0 auto;
  padding-bottom: 1rem;
}

.quizlet-words,
.quizlet-translations {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(.15rem + .45vw);
}

.quizlet-item {
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  hyphens: auto;
}

.quizlet-item .verb-input {
   width: 120px;
   border: none;
}

.quizlet-item.matched .verb-input {
  border: none;
  font-weight: bold;
  color: #ffffff;
  padding: 0px!important;
  margin: 0px!important;
}

.verb-input:disabled {
    opacity: 1 !important;
    background: var(--color-primary);
    -webkit-text-fill-color: currentColor; /* Wichtig für Safari/iOS, da dieser Browser eigene Regeln für disabled hat */
}

.quizlet-item .pronoun-prefix {
  font-weight: normal;
  padding-right: 0.3rem;
}

.quizlet-item.matched .pronoun-prefix {
  font-weight: bold;
  padding-right: 0.1rem;
}

.quizlet-item:hover:not(.matched):not(.disabled) {
  background: var(--body-color);
  border-color: transparent!important;
  color: #ffffff!important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all .3s;
}

.quizlet-item.selected {
  background: var(--body-color);
    color: #ffffff!important;
}

.quizlet-item.matched {
  background: var(--color-primary) !important;
  color: #ffffff!important;
  cursor: default;
  opacity: 1!important;
}

.quizlet-item.unmatched {
    background: var(--color-fifth)!important;
    color: var(--body-color)!important;
    animation: shake 0.5s;
    /*pointer-events: none;  */
    opacity: 1!important;
}

.quizlet-item.disabled {
    cursor: not-allowed;
    opacity: 0.8;
    background: var(--color-tertiary);
    color: var(--body-color);
}

/* crossword */
.crossword-grid-wrapper {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
}

#crossword-grid .crossword-table {
    border-collapse: collapse;
    border: 1px solid var(--body-color);
    width: auto;
}

#crossword-grid .crossword-cell {
    padding: 0;
    margin: 0;
    border: 1px solid var(--body-color);
    position: relative; /* must be set to place word number correctly */
    width: var(--cell-size);
    height: var(--cell-size);
    line-height: 0;
}

#crossword-grid .empty-cell, .empty-cell {
    background-color: var(--body-color);
    border: none;
}

#crossword-grid .crossword-input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    background-color: #fff;
    font-size: calc(var(--cell-size) * 0.6);
    line-height: normal;
    box-sizing: border-box;
    z-index: 5;
    position: relative;
}

/* word number for start cell */
.word-number {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: calc(var(--cell-size) * 0.4);
    line-height: 1;
    color: var(--body-color);
    z-index: 15; /* number has to be before the input field */
    background: none;
}

.crossword-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #5a5a5a inset;
}

.crossword-clues {
  padding-top: 1rem;
  flex: 1 1 200px;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}

.crossword-clues-across, .crossword-clues-down {
  flex: 1 1 150px;
}

.crossword-clues h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.crossword-clues ul {
    list-style: none;
    padding: 0;
}

.crossword-clues li .clue-content {
    margin-bottom: 3px;
    padding: 5px 6px 3px 6px;
    font-size: 0.95em;
    line-height: 1.2;
    border-radius: 4px;
    display: inline-block;
}

/* highlight active clue */
.crossword-clues li.active-clue .clue-content {
    background-color: rgb(244,185,66,0.3);
}

.crossword-clues li.clue-solved::after {
    content: '\2713';
    color: var(--body-color);
    font-size: 1.2em;
    font-weight: bold;
    position: absolute;
    padding-top: 2px;
    padding-left: 5px;
    line-height: 1;
}

/* Correct filled in word -> locked */
.crossword-input.correct {
    background-color: rgb(187, 62, 121,0.95) !important;
    color: #ffffff;
    /*border-color: #4CAF50 !important;   */
}
/* wrong word */
.crossword-input.incorrect {
    background-color: var(--color-fifth) !important;
}

/* Highligth word from active input / user is writing ...  */
.crossword-input.active-word {
    background-color: var(--color-fifth);
}

/* Highligth cell from active input / user is writing ... */
#crossword-grid .crossword-input.active-cell.active-word,
#crossword-grid .crossword-input.active-cell,
#crossword-grid .crossword-input.active-word {
    background-color:  rgb(244,185,66,0.3);
}

/* score aller units in current user language */
.score-display-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 1rem 0 2rem 0;
}

.score-number {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.1;
  color: var(--body-color);
}
.score-label {
  font-size: 0.9em;
  font-weight: normal;
}


/* my vocab list */
.vocab-table, .verb-table {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0;
}
.vocab-table th, .vocab-table td,
.verb-table th, .verb-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}
.vocab-table th a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.vocab-table th a span {
    margin-left: 5px;
    font-size: 0.8em;
}

.vocab-table .strength-col {
    text-align: center;
    width: 100px; /* Feste Breite für die Stärke-Spalte */
}

.strength-light {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.7em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    vertical-align: middle;
    cursor: help; /* Zeigt an, dass man für mehr Infos hovern kann */
}
.strength-orange { background-color: #f97316; } /* Orange für Stärke 1-2 */
.strength-yellow { background-color: #facc15; } /* Gelb für Stärke 3 */
.strength-light-green { background-color: #84cc16; } /* Hellgrün für Stärke 4 */
.strength-dark-green { background-color: #009900; } /* Dunkelgrün für Stärke 5 */

/* Styling für vocab_quiz */
.vocab-quiz-container {
  font-size: 1.2rem!important;
}

.vocab-quiz-translation {
  padding: 1rem 0rem 0rem 0rem;
}

.step-buttons, .tryAgainBtn {
  text-align: center;
  margin: 0 auto;
}

.next-step {
  padding: 1.5rem 0rem;
}

/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* background styles */

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    animation: animate 40s linear infinite;
    bottom: -150px;

}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}


@media (min-width: 560px) {
.orig-title {
  display: block;
}
}

@media (min-width: 992px) {
.tenses {
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
}

.verb-conjugation {
  display: grid;
  gap: .5rem calc(.5rem + 1.5vw);
  grid-template-columns: 1fr 1fr;
}

.site-grid {
  grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(6, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
  grid-template-areas: ". banner banner banner banner banner banner   ."
                       ". top-a top-a top-a top-a top-a top-a   ."
                       ". top-b top-b top-b top-b top-b top-b   ."
                       ". side-l comp comp comp comp side-r ."
                       ". bot-a bot-a bot-a bot-a bot-a bot-a ."
                       ". bot-b bot-b bot-b bot-b bot-b bot-b  .";
}
.container-header .mod-menu > li.active::after, .container-header .mod-menu > li:hover::after,
.container-header .mod-menu > li.current::after {
  background: var(--color-primary) !important;
  left: 0;
  right: 0px;
  transition: all 0.3s ease;
  opacity: 1;
}

.offcanvas-body {
  justify-content: flex-end;
}

.site-grid {
  grid-gap: 0 2rem;
}

.container-header .grid-child {
  padding: 0 2rem;
}

.btn, .quizlet-item {
  font-size: calc(1rem + .1vw);
  padding: .77rem 1.2rem .6rem 1.2rem;
  min-width: 110px;
}
}


@media (min-width: 1200px) {

.selection-container, .exercise, .progress-container {
  max-width: 830px;
}

.btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    z-index: -2;
  }
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--body-color);
    transition: all .3s;
    border-radius: 1rem;
    z-index: -1;
  }
  &:hover {
    color: #fff;
    &:before {
      width: 100%;
    }
  }
}
}

@media (max-width: 991.98px) {

.offcanvas.offcanvas-start {  /* from left to right */
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  background: var(--color-tertiary);
  z-index: 999999!important;
  max-width: 140px;
  transition: transform 0.4s ease-in-out;
}

/* When active (visible) */
.offcanvas.offcanvas-top.show {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.offcanvas-header .btn-close {
  font-size: 1.5rem!important;
  --btn-close-opacity: 1;
}

.container-sidebar-left {
  position: absolute;
}

.mainmenu {
  margin: 0rem!important;
}

.navbar {
  padding:0rem;
  margin: 0rem;
}

.navbar-toggler {
  line-height: 1;
  border-radius: 50%;
  background: var(--color-primary);
  border: 0px solid transparent!important;
  padding: 2.1rem .8rem .8rem .8rem;
  margin-top: -2.4rem;
  margin-left: -.5rem;
  width: 4rem;
  height: 4.5rem;
}

.navbar-toggler:hover {
  background: var(--body-color);
}

.icon-menu::before {
  content: "";
  background-image: url("../images/expand_down.png")!important;
  background-size: 2.5rem;
  background-repeat: no-repeat;
  background-position: center;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
}

.offcanvas-header .btn-close {
  content: "";
  background-image: url("../images/expand_up.png");
  background-size: 2.5rem;
  background-repeat: no-repeat;
  background-position: center;
}

.selection-heading, .exercise-heading {
  margin-left: 4rem;
}
}

@media (max-width: 450px) {

.selection-heading, .exercise-heading {
  margin-left: 1rem;
}
}