.rr-quiz {
--rr-primaer: var(--e-global-color-primary, #a0fc44);
--rr-sekundaer: var(--e-global-color-secondary, #5d6357);
--rr-text: var(--e-global-color-text, #2c3325);
--rr-akzent: var(--e-global-color-accent, #7e9665);
--rr-grund: #fff; --rr-linie: rgba(44, 51, 37, 0.18);
--rr-linie-stark: rgba(44, 51, 37, 0.58);
--rr-gedaempft: rgba(44, 51, 37, 0.68);
--rr-akzent-text: #657851;
--rr-richtig-rand: #2f6f2f;
--rr-richtig-flaeche: rgba(160, 252, 68, 0.28);
--rr-falsch-rand: #a4261e;
--rr-falsch-flaeche: rgba(164, 38, 30, 0.08);
--rr-radius: 10px;
--rr-luft: 16px;
--rr-luft-gross: 24px;
box-sizing: border-box;
max-width: 40rem;
margin: 0 auto;
color: var(--rr-text);
font-family: inherit;
line-height: 1.5;
text-align: left;
}
.rr-quiz *,
.rr-quiz *::before,
.rr-quiz *::after {
box-sizing: inherit;
}
.rr-karte {
background: var(--rr-grund);
border: 1px solid var(--rr-linie);
border-radius: var(--rr-radius);
padding: var(--rr-luft-gross);
}
.rr-titel {
margin: 0 0 0.5em;
font-size: 1.5rem;
line-height: 1.2;
}
.rr-untertitel {
margin: var(--rr-luft-gross) 0 0.5em;
font-size: 1.1rem;
}
.rr-text {
margin: 0 0 var(--rr-luft);
}
.rr-hinweis,
.rr-fuss {
margin: var(--rr-luft) 0 0;
color: var(--rr-gedaempft);
font-size: 0.8125rem;
}
.rr-fuss {
text-align: right;
}
.rr-zaehler {
margin: 0 0 0.5em;
color: var(--rr-gedaempft);
font-size: 0.875rem;
} .rr-balken {
height: 4px;
margin-bottom: var(--rr-luft);
background: var(--rr-linie);
border-radius: 2px;
overflow: hidden;
}
.rr-balken-fuellung {
height: 100%;
background: var(--rr-akzent-text);
transition: width 200ms ease-out;
} .rr-bild {
aspect-ratio: 16 / 9;
margin-bottom: var(--rr-luft);
background: var(--rr-linie);
border-radius: var(--rr-radius);
overflow: hidden;
}
.rr-bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rr-frage {
margin: 0 0 var(--rr-luft);
font-size: 1.25rem;
line-height: 1.3;
}
.rr-antworten {
display: grid;
gap: 8px;
}
.rr-antwort {
width: 100%;
padding: 14px 16px;
background: var(--rr-grund);
color: var(--rr-text);
border: 1px solid var(--rr-linie-stark);
border-radius: var(--rr-radius);
font: inherit;
text-align: left;
cursor: pointer;
}
.rr-antwort:hover:not(:disabled) {
border-color: var(--rr-akzent-text);
}
.rr-antwort:disabled {
cursor: default;
opacity: 1; } .rr-antwort-gewaehlt {
border: 2px solid var(--rr-akzent-text);
background: var(--rr-grund);
font-weight: 600;
}
.rr-wartet {
margin: 0;
color: var(--rr-gedaempft);
font-size: 0.875rem;
}
.rr-antwort-richtig {
border: 2px solid var(--rr-richtig-rand);
background: var(--rr-richtig-flaeche);
font-weight: 600;
}
.rr-antwort-falsch {
border: 2px solid var(--rr-falsch-rand);
background: var(--rr-falsch-flaeche);
}
.rr-aufloesung:not(:empty) {
margin-top: var(--rr-luft-gross);
padding-top: var(--rr-luft);
border-top: 1px solid var(--rr-linie);
}
.rr-urteil {
margin: 0 0 0.5em;
font-weight: 600;
}
.rr-urteil:focus {
outline: none; }
.rr-urteil-richtig {
color: var(--rr-richtig-rand);
}
.rr-urteil-falsch {
color: var(--rr-falsch-rand);
}
.rr-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--rr-luft);
}
.rr-knopf {
display: inline-block;
padding: 12px 20px;
border: 1px solid transparent;
border-radius: var(--rr-radius);
font: inherit;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.rr-knopf-haupt {
margin-top: var(--rr-luft);
background: var(--rr-primaer);
color: var(--rr-text);
}
.rr-knopf-rand {
background: transparent;
color: var(--rr-text);
border-color: var(--rr-linie-stark);
}
.rr-knopf-rand:hover {
border-color: var(--rr-akzent-text);
}
.rr-knopf:disabled {
opacity: 0.6;
cursor: default;
}
.rr-quiz :focus-visible {
outline: 2px solid var(--rr-richtig-rand);
outline-offset: 2px;
}
.rr-stufen {
margin: 0 0 var(--rr-luft);
padding: 0;
border: 0;
}
.rr-legende {
padding: 0;
margin-bottom: 8px;
font-weight: 600;
}
.rr-stufe {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
cursor: pointer;
}
.rr-punkte {
margin: 0;
font-size: 2rem;
font-weight: 700;
line-height: 1.1;
}
.rr-stufe-titel {
margin: 0.25em 0 var(--rr-luft);
color: var(--rr-akzent-text);
font-size: 1.125rem;
font-weight: 600;
}
.rr-form {
margin-top: var(--rr-luft);
padding-top: var(--rr-luft);
border-top: 1px solid var(--rr-linie);
}
.rr-label {
display: block;
margin-bottom: 6px;
font-size: 0.875rem;
}
.rr-feld {
width: 100%;
padding: 12px 14px;
background: var(--rr-grund);
color: var(--rr-text);
border: 1px solid var(--rr-linie-stark);
border-radius: var(--rr-radius);
font: inherit;
} .rr-falle {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.rr-fehler {
margin: 8px 0 0;
color: var(--rr-falsch-rand);
font-size: 0.875rem;
}
.rr-fehler:empty {
margin: 0;
}
.rr-tabelle {
width: 100%;
margin-top: 8px;
border-collapse: collapse;
font-size: 0.9375rem;
}
.rr-tabelle th,
.rr-tabelle td {
padding: 8px 4px;
border-bottom: 1px solid var(--rr-linie);
text-align: left;
}
.rr-tabelle th {
color: var(--rr-gedaempft);
font-size: 0.8125rem;
font-weight: 600;
}
.rr-tabelle td:first-child,
.rr-tabelle th:first-child {
width: 3em;
}
.rr-tabelle td:last-child,
.rr-tabelle th:last-child {
width: 4em;
text-align: right;
}
@media (min-width: 480px) {
.rr-antworten {
gap: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.rr-quiz * {
transition: none !important;
}
}