/* =====================================================
   miStudia Gap Text Trainer
   Version 1.0
   Datei: css/style.css
===================================================== */

:root{

    --primary:#2563EB;
    --success:#16A34A;
    --warning:#EA580C;
    --danger:#DC2626;

    --background:#F4F6F8;
    --surface:#FFFFFF;

    --text:#1F2937;
    --text-light:#6B7280;

    --border:#D1D5DB;

    --shadow:0 8px 25px rgba(0,0,0,.08);

    --radius:14px;

    --transition:.25s;

}

/* =====================================================
   Grundlayout
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:var(--background);

    color:var(--text);

    padding:25px;

}

img{
    max-width:100%;
    display:block;
}

button,
input{

    font:inherit;

}

/* =====================================================
   Container
===================================================== */

.site-header,
.language-selector,
.exercise-header,
.exercise-container,
.controls,
.result-panel,
.site-footer{

    max-width:1000px;
    margin:auto;

}

.exercise-container,
.controls,
.result-panel,
.site-footer{

    background:var(--surface);

}

.exercise-container{

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin-bottom:20px;

}

/* =====================================================
   Header
===================================================== */

.site-header{

    text-align:center;

    margin-bottom:30px;

}

.logo-large{

    width:220px;

    margin:
    0 auto
    20px;

}

.site-header h1{

    font-size:2.1rem;

    margin-bottom:10px;

    font-weight:700;

}

/* =====================================================
   Sprache
===================================================== */

.language-selector{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.language-button{

    padding:
    12px
    22px;

    border:none;

    border-radius:10px;

    background:white;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.language-button:hover{

    transform:translateY(-2px);

}

.language-button.active{

    background:var(--primary);

    color:white;

}

/* =====================================================
   Titel
===================================================== */

.exercise-header{

    text-align:center;

    margin-bottom:20px;

}

.exercise-header h3{

    font-size:1.6rem;

    margin-bottom:8px;

}

.exercise-header p{

    color:var(--text-light);

}

/* =====================================================
   Fließtext
===================================================== */

#exercise{

    font-size:1.12rem;

    line-height:2.1;

    text-align:justify;

}

input{

    width:150px;
    height:40px;

    padding:4px 8px;

    border:2px solid var(--border);
    border-radius:8px;

    text-align:center;

}

input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
    0 0 0 3px
    rgba(37,99,235,.18);

}

/* =====================================================
   Status
===================================================== */

.correct{

    border-color:var(--success)!important;

    background:#ECFDF3;

}

.wrong{

    border-color:var(--danger)!important;

    background:#FEF2F2;

}

/* kurzer Blinkeffekt */

.flash-correct{

    animation:
    flashGreen
    .55s;

}

.flash-wrong{

    animation:
    flashRed
    .55s;

}

@keyframes flashGreen{

    0%{
        background:#BBF7D0;
    }

    100%{
        background:white;
    }

}

@keyframes flashRed{

    0%{
        background:#FECACA;
    }

    100%{
        background:white;
    }

}

/* =====================================================
   Verb + Hint
===================================================== */

.verb{

    font-size:.82rem;

    color:var(--text-light);

}

.hintButton{

    width:32px;
    height:32px;

    padding:0;

    margin:0 4px;

    border:none;

    border-radius:8px;

    display:inline-flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    background:#FACC15;

}

.hintButton:hover{

    filter:brightness(.95);

}

.hintText{

    margin-left:5px;

    font-size:.82rem;

    color:#A16207;

    font-weight:bold;

}

/* =====================================================
   Buttons
===================================================== */

.controls{

    display:flex;

    justify-content:center;

    gap:12px;

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    flex-wrap:wrap;

    margin-bottom:20px;

}

.btn{

    border:none;

    border-radius:10px;

    padding:
    13px
    22px;

    color:white;

    cursor:pointer;

    transition:var(--transition);

}

.btn:hover{

    transform:translateY(-2px);

}

.btn-check{

    background:var(--primary);

}

.btn-solution{

    background:var(--success);

}

.btn-reset{

    background:#f59e0b;

}

/* =====================================================
   Ergebnis
===================================================== */

.result-panel{

    text-align:center;

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    min-height:85px;

    margin-bottom:25px;

    font-size:1.15rem;

    font-weight:bold;

}

/* =====================================================
   Footer
===================================================== */

.site-footer{

    margin-top:35px;

    text-align:center;

    padding:25px;

}

.site-footer hr{

    border:none;

    border-top:1px solid var(--border);

    margin-bottom:20px;

}

.logo-small{

    width:110px;

    margin:
    0 auto
    12px;

}

.site-footer p{

    color:var(--text-light);

}

.site-footer a{

    color:var(--primary);

    text-decoration:underline;

    font-weight:bold;

}

.site-footer a:hover{

    text-decoration:none;

}

/* =====================================================
   Smartphone
===================================================== */

@media(max-width:768px){

    body{

        padding:12px;

    }

    .exercise-container{

        padding:20px;

    }

    #exercise{

        text-align:left;

        line-height:3;

        font-size:1rem;

    }

    input{

        width:145px;

    }

    .controls{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .logo-large{

        width:180px;

    }

}

/* ===========================================
   Jubelelefant
=========================================== */

#jubelElefant{

    position:fixed;

    right:20px;
    bottom:60px;

    width:190px;

    display:none;

    z-index:10000;

    pointer-events:none;

}


.predicate{

    text-decoration: underline;

    text-decoration-thickness: 2px;

    text-underline-offset: 3px;

    font-weight: 600;

}

.gapInput{

    display:inline-block;

    vertical-align:middle;

}

.afterGap{

    white-space:nowrap;

}