@charset "UTF-8";@font-face{font-family:TheMix;src:local("TheMix"),url(../fonts/TheMixC5-4_SemiLight.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:TheMix;src:local("TheMix"),url(../fonts/TheMixC5-6_SemiBold.woff2) format("woff2");font-weight:600;font-display:swap;font-style:normal}:root{--quiz-width: 90%;--quiz-height: 85%;--margin: 20px;--fz: 1.25rem;--fz-header-1: 2rem;--fz-header-2: 1.5rem;--fallback-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue";--color-grau: #808080;--color-orange: #ffa500;--color-blau: #1e90f9;--color-gelb: #ff0;--color-lila: #8a2be2;--color-rosa: #ff69b4;--color-rot: #f00;--color-tuerkis: #40e0d0;--color-braun: #7f4513;--color-schwarz: #000;--color-gruen: #0f0;--color-weiss: #fff;--app-bg: var(--color-grau);--header-color: var(--color-schwarz);--header-bg: #e7eae0;--header-border: var(--header-bg);--border-color: var(--color-gruen);--border: 8px solid var(--border-color);--btn-bg: rgb(106, 128, 202);--btn-color: #000;--btn-padding: 4px 8px;--btn-check: var(--border-color);--answer-padding: 10px;--answer-width: 100%;--form-element-height: 40px;--element-bg: #000;--element-text: #fff;--innerDistanceBottom: 20px;--innerDistanceTop: 10px;--btn-footer-bg: var(--color-schwarz);--btn-footer-color: var(--color-weiss)}html{font-size:16px;min-height:100vh}*{box-sizing:border-box}body{background-image:url(../images/bg1-1600px.jpg);background-size:100vw;background-repeat:no-repeat;overflow-x:hidden;background-color:var(--element-bg);font-family:"TheMix",var(--fallback-fonts),sans-serif;font-weight:400;font-size:var(--fz);margin:0;letter-spacing:2px}h1{font-weight:600;font-size:var(--fz-header-1);margin:0}h2{font-weight:600;font-size:var(--fz-header-2);margin:0}.sr-only{width:1px!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important}#app{display:flex;width:100vw;justify-content:center;margin-top:40px}.container{display:flex;width:var(--quiz-width);height:var(--quiz-height);flex-flow:column;margin:auto}@media screen and (min-width: 900px){:root{--quiz-width: min(90%, 800px)}}.question{display:flex;flex-direction:column;align-items:center;width:100%;color:#fff}.question p{margin-top:20px}.exercise,.result{border:var(--border);background:var(--element-bg);width:100%;padding:20px 10px 10px;border-top:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}@media (min-width: 768px){.exercise,.result{padding:40px 10px 10px}}.quiz-header{background:var(--element-bg);flex:1 0 100%;border:var(--border);width:100%;padding:4px;border-bottom:none}@media (min-width: 768px){.quiz-header{padding:10px}}.quiz-header.waiting{border-bottom:var(--border)}.quiz-header.waiting .quiz-header-inner{display:none}.quiz-header-headline{text-transform:lowercase;background-color:var(--border-color);color:var(--color-schwarz);padding:1px 5px;margin-bottom:var(--innerDistanceTop);font-size:1.25rem}@media (min-width: 768px){.quiz-header-headline{padding:6px 12px;font-size:1.5rem}}.quiz-header-inner{display:flex;width:100%;justify-content:space-between;align-items:center;padding:0 8px}@media (min-width: 768px){.quiz-header-inner{padding:0 12px}}.countdown-wrapper{height:35px;width:110px;display:flex;justify-content:center;align-items:center;overflow:hidden}@media (min-width: 768px){.countdown-wrapper{height:60px;width:220px}}.countdown-wrapper .countdown{width:100%;height:35px;position:relative;display:flex;justify-content:center;align-items:center;font-weight:400;font-size:2.75rem}@media (min-width: 768px){.countdown-wrapper .countdown{height:60px;font-size:3.5rem}}.countdown-wrapper .countdown__fill{display:block;width:100%;height:100%;position:absolute;left:0;bottom:0;background:#F60300;opacity:1}.countdown-wrapper .countdown__digit{width:100%;color:#f60300;text-align:center;mix-blend-mode:difference;pointer-events:none;user-select:none}.step-progress{display:flex;background:var(--element-bg);height:36px;position:relative;bottom:-2px}@media (min-width: 768px){.step-progress{height:60px;bottom:-3px}}.step-progress .steps{display:flex;gap:5px;align-items:center}.step-progress .locks{--lock-dark: #b42d2c;--lock-light: #fa0000;flex:0 0 auto;width:22px;height:36px;position:relative}@media (min-width: 768px){.step-progress .locks{width:36px;height:60px}}.step-progress .locks.closed{bottom:2px}@media (min-width: 768px){.step-progress .locks.closed{bottom:3.5px}}.grau{--hexagon-bg: var(--color-grau);--circle-color: var(--color-weiss)}.orange{--hexagon-bg: var(--color-orange);--circle-color: var(--color-schwarz)}.blau{--hexagon-bg: var(--color-blau);--circle-color: var(--color-schwarz)}.gelb{--hexagon-bg: var(--color-gelb);--circle-color: var(--color-schwarz)}.lila{--hexagon-bg: var(--color-lila);--circle-color: var(--color-weiss)}.rosa{--hexagon-bg: var(--color-rosa);--circle-color: var(--color-schwarz)}.rot{--hexagon-bg: var(--color-rot);--circle-color: var(--color-weiss)}.tuerkis{--hexagon-bg: var(--color-tuerkis);--circle-color: var(--color-schwarz)}.braun{--hexagon-bg: var(--color-braun);--circle-color: var(--color-weiss)}.schwarz{--hexagon-bg: var(--color-schwarz);--circle-color: var(--color-weiss)}.gruen{--hexagon-bg: var(--color-gruen);--circle-color: var(--color-schwarz)}.weiss{--hexagon-bg: var(--color-weiss);--circle-color: var(--color-schwarz)}.color-riddle{display:flex;margin-bottom:var(--innerDistanceBottom)}@media (min-width: 768px){.color-riddle{--innerDistanceBottom: 40px;--innerDistanceTop: 20px}}.color-riddle-area{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.color-riddle-text{grid-area:text;text-align:center;font-size:1rem}@media (min-width: 520px){.color-riddle-text{font-size:1.25rem}}.add-sign{grid-area:plus;align-self:center;justify-self:center;margin-inline:6px 4px;font-size:30px}@media (min-width: 520px){.add-sign{margin-inline:6px 12px;font-size:60px}}@media (min-width: 768px){.add-sign{font-size:80px}}.runde-1{--hexagon-width: 88px}@media (min-width: 520px){.runde-1{--hexagon-width: 120px}}@media (min-width: 768px){.runde-1{--hexagon-width: 160px}}.runde-3{--hexagon-width: 40px}@media (min-width: 520px){.runde-3{--hexagon-width: 60px}}@media (min-width: 768px){.runde-3{--hexagon-width: 80px}}.hexagon-cnt{position:relative;height:var(--hexagon-width);width:var(--hexagon-width)}.hexagon-number{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;align-items:center;font-size:20px;line-height:1;color:#000}@media (min-width: 520px){.hexagon-number{font-size:30px}}@media (min-width: 768px){.hexagon-number{font-size:40px}}.hexagon-right{transform:scaleX(-1)}.hexagon{width:var(--hexagon-width);height:var(--hexagon-width)}.color-riddle:nth-of-type(even) .hexagon{transform:scaleX(-1)}.runde-3 .hexagon-number{transform:translateY(-5%)}.quiz-header.waiting .waiting-to-start{width:400px;max-width:85vw;height:4px;border-radius:4px;background:rgba(255,255,255,.5);overflow:hidden;margin-top:10px}.quiz-header.waiting .waiting-to-start:after{content:"";display:block;width:100%;height:4px;background:white;animation:load 15s linear}.quiz-header.waiting .waiting-to-start-wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:100px 0;width:100%;color:#fff;font-weight:600;font-size:var(--fz-header-2)}.waiting-to-start-wrapper{display:none}@keyframes load{0%{width:0}10%{width:5%}20%{width:15%}30%{width:25%}40%{width:30%}50%{width:44%}60%{width:50%}70%{width:72%}80%{width:84%}90%{width:92%}to{width:100%}}.time-riddle{display:flex;gap:20px;font-size:40px;justify-content:center;margin-bottom:var(--innerDistanceBottom)}.form-container{display:flex;flex-direction:column;width:100%;margin-block:var(--margin);border:var(--border)}.answer{padding:var(--answer-padding);width:var(--answer-width);height:var(--form-element-height);background-color:var(--color-schwarz);color:var(--color-weiss);accent-color:var(--color-weiss);font-size:1.25rem;outline:none;border:3px solid var(--color-schwarz)}@media (min-width: 768px){.answer{font-size:1.5rem;--form-element-height: 68px}}.answer:hover,.answer:focus{border:3px solid var(--border-color)}@media screen and (min-width: 600px){.form-container{flex-direction:row}.answer{--answer-width: 50%;flex:1 1 auto}.btn-check{flex:1 1 auto}}@media screen and (min-width: 900px){.form-container{flex-direction:row}.answer{--answer-width: 76%;flex:1 1 66%}.btn-check{flex:0 0 320px}}.btn-container{display:flex;width:100%;height:auto;justify-content:center;margin-top:50px}button{font-family:"TheMix",var(--fallback-fonts),sans-serif;font-size:18px;height:35px;border:none;outline:none;padding:var(--btn-padding);background-color:var(--btn-bg);color:var(--btn-color);letter-spacing:2px;cursor:pointer}button:hover,button:focus{border:3px solid var(--color-schwarz)}.btn-check{border:3px solid var(--border-color);background-color:var(--btn-check);height:var(--form-element-height);text-transform:lowercase;font-size:1.25rem;padding:4px}@media (min-width: 768px){.btn-check{font-size:1.5rem;padding:7px;--form-element-height: 68px}}.voice-cnt{border:var(--border);border-top-width:16px;background:var(--element-bg);width:100%;margin-block:var(--margin)}.voice-cnt{color:#fff}.voice-cnt-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 4px 4px}@media (min-width: 520px){.voice-cnt-header{padding:10px}}.voice-cnt-header #soundButton{width:44px;height:44px;background-color:#000;padding:0;box-shadow:none;outline:none}@media (min-width: 520px){.voice-cnt-header #soundButton{width:50px;height:50px}}.voice-cnt-header #soundButton svg{width:44px;height:44px;padding:10px}@media (min-width: 520px){.voice-cnt-header #soundButton svg{width:50px;height:50px;padding:0}}.voice-cnt-header #soundButton:hover,.voice-cnt-header #soundButton:focus,.voice-cnt-header #soundButton:active{border:none}.voice-cnt-headline{margin-left:6px;font-weight:400;font-size:1rem}@media (min-width: 520px){.voice-cnt-headline{font-size:1.25rem;margin-left:10px}}@media (min-width: 768px){.voice-cnt-headline{font-size:1.5rem}}.animated-item-wrapper{margin:10px auto;width:100%;height:50px;text-align:center;background:black;display:flex;gap:3px}.animated-item{background-color:#fafafa;height:100%;width:3px;display:inline-block;animation:wave 1.6s infinite ease-in-out}.animated-item:nth-child(2n){animation-delay:-1.4s}.animated-item:nth-child(3n),.animated-item:nth-child(5n+4){animation-delay:-1.2s}.animated-item:nth-child(4n),.animated-item:nth-child(3n+2){animation-delay:-1s}.animated-item:nth-child(5n),.animated-item:nth-child(4n+3){animation-delay:-.8s}@keyframes wave{0%,40%,to{transform:scaleY(.4)}5%,70%,90%{transform:scaleY(.75)}20%,80%{transform:scaleY(1)}30%,15%{transform:scaleY(.62)}}.result{display:flex;width:100%;flex-flow:column;background-color:var(--element-bg);color:var(--element-text);text-align:center;padding-bottom:40px}.result h2{margin-top:40px}.next{background-color:#6a80ca}.site-footer{margin-top:auto}.btn-wrapper{display:flex;justify-content:flex-end;gap:20px}.btn-footer{background-color:var(--btn-footer-bg);color:var(--btn-footer-color);padding:var(--btn-padding);text-decoration:none;font-size:.8rem;text-transform:lowercase}.btn-footer.btn-active{--btn-footer-bg: var(--border-color);--btn-footer-color: var(--color-schwarz)}.btn-footer:hover,.btn-footer:focus{border:2px dashed var(--border-color)}.btn-footer,.btn-footer:active{border:2px solid var(--border-color)}.legal{color:var(--color-weiss);border:var(--border);padding:10px;background-color:var(--element-bg)}.legal a{color:inherit}.legal-headline{font-weight:600;font-size:var(--fz-header-2);margin:0;text-transform:lowercase}.legal-enter-active,.legal-leave-active{transition:all .5s ease}.legal-enter-from,.legal-leave-to{opacity:0;transition:translateX(-100%)}audio{display:none}.audio-animation-wrapper{display:grid}.audio-animation-wrapper .audio-animation-box{height:60px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;top:0;grid-row:1;grid-column:1}.audio-animation-wrapper .audio-animation-box:after{display:block;content:"";width:100%;background-color:#fff;height:1px;position:absolute}.audio-animation-wrapper #audio-animation-background,.audio-animation-wrapper #audio-animation-voice{width:100%;height:60px;image-rendering:crisp-edges}