/* ===========================================
   ATZIG · FOTZIG · MAUSIG
   style.css
   Teil 1
=========================================== */


/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    font-size:16px;
    -webkit-text-size-adjust:100%;

}

body{

    margin:0;

    font-family:"Inter",sans-serif;

    background:var(--background);

    color:white;

}


/* ---------- Farben ---------- */

:root{

    --primary: rgb(74,74,255);

    --primary25: rgba(74,74,255,.25);

    --primary75: rgba(74,74,255,.75);

    --background: rgb(74,74,255);

    --surface:#ffffff;

    --text:#111111;

}


/* ---------- Layout ---------- */

.app{

    width:100vw;
    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


.screen{

    position:absolute;

    inset:0;

    display:none;

    padding:42px 28px;

    background:var(--bg);

}


.screen.active{

    display:flex;

    flex-direction:column;

}


/* ===========================================
   START
=========================================== */

#screen-start{

    justify-content:center;

    align-items:center;

    text-align:center;

}


.logo{

    width:170px;

    margin-bottom:60px;

}


.logo svg{

    width:100%;

    transform-origin:center;

    animation:logoRotate 18s linear infinite;

}


#screen-start h1{

    color:white;

    font-size:2.8rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;

}


#screen-start p{

    color:rgba(255,255,255,.8);

    line-height:1.6;

    margin-bottom:60px;

}


/* ===========================================
   BUTTONS
=========================================== */

.button{

    border:none;

    border-radius:18px;

    cursor:pointer;

    transition:.25s;

    font-size:1rem;

    padding:18px 24px;

}


.primary{

    background:rgba(255,255,255,.25);

    color:white;

}


.primary:hover{

    background:rgba(255,255,255,.75);

    color:rgb(74,74,255);

}


.secondary{

    background:rgba(255,255,255,.25);

    color:white;

    border:none;

}


.secondary:hover{

    background:rgba(255,255,255,.75);

    color:rgb(74,74,255);

}

/* ===========================================
   QUIZ
=========================================== */

#screen-quiz{

    justify-content:space-between;

}


/* ---------- Header ---------- */

.quiz-header{

    width:100%;

}


.progress-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

}


#question-counter{

    color:white;

    font-weight:600;

    letter-spacing:.02em;

}


/* ---------- Progress ---------- */

.progress{

    width:100%;

    height:10px;

    background:rgba(255,255,255,.25);

    border-radius:999px;

    overflow:hidden;

}


#progress-fill{

    width:0%;

    height:100%;

    background:rgba(255,255,255,.75);

    border-radius:999px;

    transition:width .35s ease;

}


/* ---------- Frage ---------- */

.quiz-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


#question-text{

    color:white;

    font-size:2.5rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:40px;

}


/* ---------- Antworten ---------- */

#answers{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.answer{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.25);

    border:none;

    border-radius:22px;

    padding:18px;

    min-height:230px;

    cursor:pointer;

    transition:.2s;

    text-align:center;

    color:white;

}


.answer:hover{

    background:rgba(255,255,255,.75);

    color:rgb(74,74,255);

    transform:translateY(-4px);

}

.answer:hover .answer-image{

    transform:scale(1.06);

}

.answer:active{

    transform:scale(.98);

}


/* ---------- Footer ---------- */

.quiz-footer{

    padding-top:24px;

}
/* ===========================================
   ERGEBNIS
=========================================== */

#screen-result{

    justify-content:center;

    align-items:center;

    text-align:center;

    animation:fadeIn .4s ease;

}


#screen-result h2{

    color:white;

    font-size:4rem;

    font-weight:800;

    line-height:1;

    margin-bottom:12px;

}

#result-subtitle{

    color:rgba(255,255,255,.75);

    font-size:1rem;

    margin-bottom:48px;

}

/* ===========================================
   DREIECK
=========================================== */

.triangle-wrapper{

    width:min(92vw,500px);

    margin:20px auto 50px;

}


#triangle-svg{

    width:100%;
    height:auto;
    overflow:visible;

}


#triangle-svg text{

    fill:rgba(255,255,255,.75);

    font-size:18px;

    font-weight:700;

    letter-spacing:.04em;

    user-select:none;

}


.triangle-outline{

    fill:none;

    stroke:rgba(255,255,255,.75);

    stroke-width:5;

    stroke-linejoin:round;

    stroke-linecap:round;

}


#result-point{

    fill:white;

    transform-box: fill-box;

    transform-origin:center;

}

#result-point.animate{

    animation:pop .45s ease;

}


/* ===========================================
   WERTE
=========================================== */

.result-bars{

    width:100%;

    max-width:500px;

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-bottom:50px;

}

.result-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.result-head span{

    color:white;

    font-weight:700;

    letter-spacing:.08em;

}

.result-head strong{

    color:white;

    font-size:1rem;

}

.progress-fill-result{

    width:0%;

    height:100%;

    background:rgba(255,255,255,.75);

    border-radius:999px;

    transition:width .8s ease;

}


/* ===========================================
   ANIMATIONEN
=========================================== */

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


@keyframes pop{

    0%{

        transform:scale(.5);

    }

    55%{

        transform:scale(1.35);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes pointPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.7);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes logoRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===========================================
   SCREEN WECHSEL
=========================================== */

.screen{

    opacity:0;

    pointer-events:none;

    transition:

            opacity .25s ease;

}


.screen.active{

    opacity:1;

    pointer-events:auto;

}


/* ===========================================
   FOKUS
=========================================== */

button:focus-visible{

    outline:3px solid #000;

    outline-offset:4px;

}


/* ===========================================
   SAFE AREA (iPhone)
=========================================== */

body{

    padding-top:env(safe-area-inset-top);

    padding-bottom:env(safe-area-inset-bottom);

    padding-left:env(safe-area-inset-left);

    padding-right:env(safe-area-inset-right);

}


/* ===========================================
   TABLET
=========================================== */

@media (min-width:768px){

    .screen{

        padding:60px;

    }

    #question-text{

        font-size:2.4rem;

        max-width:700px;

    }

    .answer{

        font-size:1.05rem;

        padding:22px;

    }

}


/* ===========================================
   DESKTOP
=========================================== */

@media (min-width:1100px){

    .screen{

        max-width:850px;

        margin:auto;

    }

}


/* ===========================================
   REDUCED MOTION
=========================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}


/* ===========================================
   OPTIONAL DUNKLER MODUS
=========================================== */

@media (prefers-color-scheme:dark){

    :root{

        --bg:#161616;

        --white:#222;

        --text:#f2f2f2;

        --light:#2d2d2d;

        --grey:#9b9b9b;

        --accent:#ffffff;

    }

    body{

        background:var(--bg);

        color:var(--text);

    }

    .screen{

        background:var(--bg);

    }

    .answer,
    .value,
    .secondary{

        background:#232323;

        border-color:#3b3b3b;

        color:#f2f2f2;

    }

    .answer:hover{

        background:#2b2b2b;

    }

  .triangle-outline{

    fill:none;

    stroke:rgba(255,255,255,.75);

    stroke-width:2;

    stroke-linejoin:round;

    stroke-linecap:round;

}

    #triangle-svg text{

        fill:#f2f2f2;

    }

#result-point{

    fill:white;

    filter:drop-shadow(0 0 0px rgba(255,255,255,.8));

    animation:glow 2.2s ease-in-out infinite;

}

.progress{

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.25);

}

#progress-fill{

    width:0;

    height:100%;

    background:rgba(255,255,255,.75);

    transition:.35s;

}

}

#answers{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.answer-image{

    width:140px;

    height:140px;

    object-fit:contain;

    margin-bottom:8px;

    pointer-events:none;

    transition:.2s;

}

.answer span{

    font-size:.78rem;

    font-weight:600;

    line-height:1.2;

    opacity:.85;

}