/* Exercise Container */
.exercise-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 68rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.content-container {
    width: 68rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    align-items: center;
}

/* Postcard: slika v celoti vidna (contain), razmerje ohranjeno; višina iz aspect-ratio; max-width da vsebina ne prekrije footerja */
.postcard-wrapper {
    position: relative;
    width: 100%;
    max-width: 52rem;
    aspect-ratio: 258 / 165;
    flex-shrink: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("postkarte.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.postcard-body {
    position: absolute;
    top: 6rem;
    left: 2rem;
    width: 48%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.2rem;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 1;
}

.postcard-body p,
.postcard-body .postcard-line {
    margin: 0;
}

.postcard-body .drop_element {
    display: inline-flex;
    min-height: 2.5rem;
    width: 12.5rem;
    min-width: 12.5rem;
    max-width: 100%;
    vertical-align: middle;
}

/* Answers below image, single row */
.answers-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 68rem;
}

/* Common styles: same width for all (length of longest text "Ich esse jeden Tag Eis!") */
.drag_element,
.drop_element {
    width: 12.5rem;
    min-width: 12.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    border-radius: 1.25rem;
    margin: 0;
    padding: 0.5rem 0.5rem;
}

/* Drag Element Specific */
.drag_element {
    cursor: grab;
    font-size: 1rem;
    user-select: none;
    z-index: 2;
    background-color: white;
    border: 2px solid #00699F;
    justify-content: flex-start;
    text-align: left;
}

.drag_element span {
    width: 100%;
    padding: 0;
    text-align: inherit;
}

.drag_element.dragging {
    opacity: 0.5;
    cursor: grabbing;
    z-index: 1;
}

.drag_element.correct {
    border-color: #258174;
}

.drag_element.incorrect {
    border-color: #FF0000;
}

/* Drop Element Specific */
.drop_element {
    transition: all 0.3s ease;
    border: 2px solid #F9B002;
    background-color: white;
}

/* Mobile Touch Drag Styles */
@media (hover: none) {
    .drag_element {
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

.drop_element .drag_element {
    border: 0px;
    background-color: transparent;
}

.drop_element.correct {
    border-color: #258174;
    background-color: transparent;
}

.drop_element.incorrect {
    border-color: #FF0000;
    background-color: transparent;
}