.klaus-quiz {
    --klaus-landscape: none;
    --klaus-portrait: none;
    position: relative;
    max-width: 1200px;
    margin: auto
}

.klaus-grid {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-template-rows:repeat(4, minmax(0, 1fr));
    gap: clamp(5px, 1.3vw, 16px);
    aspect-ratio: 16/9;
    padding: clamp(8px, 2vw, 28px);
    background-image: var(--klaus-landscape);
    background-size: cover;
    background-position: center;
    border-radius: 3px
}

.klaus-door {
    background: rgba(255, 255, 255, .5);
    color: #f5bf37;
    font-size: clamp(1rem, 3vw, 2.8rem);
    font-weight: 800;
    border: 3px solid;
    border-radius: 10px;
    cursor: pointer;
    text-shadow: 2px 2px 5px maroon;
    font-family: 'Georgia', serif;
}

.klaus-door.is-open {
    border-color: #3bd277
}

.klaus-door.is-locked {
    border-color: #f5bf37
}

.klaus-door:focus-visible, .klaus-close:focus-visible, .klaus-answers button:focus-visible {
    outline: 3px solid #f5bf37;
    outline-offset: 3px
}

.klaus-status {
    margin-top: 8px
}

.klaus-dialog {
    width: min(92vw, 740px);
    max-height: 88vh;
    border: 0;
    border-radius: 7px;
    padding: 0;
    overflow-y: auto;
    box-shadow: 0 20px 90px #0008;
    background: #fff;
    color: #222
}

.klaus-dialog::backdrop {
    background: #000b
}

.klaus-close {
    position: sticky;
    top: 10px;
    float: right;
    margin: 10px 12px 0 0;
    z-index: 5;
    border: 0;
    border-radius: 50%;
    background: #222;
    color: white;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 25px
}

.klaus-flipper {
    position: relative;
    min-height: 200px;
    transform-style: preserve-3d;
    transition: transform .75s
}

.klaus-dialog.is-flipped .klaus-flipper {
    transform: rotateY(180deg)
}

.klaus-front, .klaus-back {
    backface-visibility: hidden;
    padding: 24px;
    box-sizing: border-box
}

.klaus-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    overflow: auto
}

.klaus-dialog.is-flipped .klaus-front {
    visibility: hidden
}

.klaus-dialog:not(.is-flipped) .klaus-back {
    visibility: hidden
}

.klaus-header {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    border-radius: 3px
}

.klaus-copy {
    margin: 18px 0;
    overflow-wrap: anywhere
}

.klaus-answers {
    display: grid;
    gap: 10px
}

.klaus-answers button {
    padding: 14px;
    border: 2px solid #777;
    border-radius: 7px;
    background: #f5f5f5;
    color: #111;
    cursor: pointer;
    text-align: left
}

.klaus-answers button.is-correct {
    background: #b5edc6;
    border-color: #16883d
}

.klaus-answers button.is-wrong {
    background: #ffc7c7;
    border-color: #c62626
}


/* Eigene Bootstrap-ähnliche Alerts: keine Bootstrap-Abhängigkeit erforderlich. */
.klaus-alert {
    position: relative;
    padding: 12px 16px;
    margin: 10px 0;
    border: 1px solid transparent;
    border-radius: 6px;
    line-height: 1.5
}

/* Error Toast */
.klaus-error-toast {
    background-color: #F0FFF0; /* #ef4444;*/
    color: #228B22;
    padding: 8px 24px;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    display: none;
    /*animation: slideUp 0.3s ease-out;*/
    font-weight: 500;
}

@media (max-width: 650px) {
    .klaus-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
        grid-template-rows:repeat(6, minmax(0, 1fr));
        aspect-ratio: 9/16;
        background-image: var(--klaus-portrait)
    }

    .klaus-door {
        font-size: clamp(1rem, 5vw, 2rem)
    }

    .klaus-alert,
    .klaus-error-toast {
        font-size: clamp(14px, 0.594rem + 0.571vw, 1rem);
        line-height: clamp(1.2, 1.81 + -0.048vw, 1.5);
    }

    .klaus-front, .klaus-back {
        padding: 18px;
        font-size: clamp(14px, 0.594rem + 0.571vw, 1rem);
        line-height: clamp(1.2, 1.81 + -0.048vw, 1.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .klaus-flipper {
        transition: none
    }
}


@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.klaus-alert-warning {
    color: #664d03;
    background: #fff3cd;
    border-color: #ffecb5
}

.klaus-alert-danger {
    color: #842029;
    background: #f8d7da;
    border-color: #f5c2c7
}

.klaus-alert-success {
    color: #0f5132;
    background: #d1e7dd;
    border-color: #badbcc
}

.klaus-preview-banner {
    background: #FFA500;
    color: #211500;
    font-weight: 700;
    padding: 12px 18px;
    text-align: center;
    border-radius: 5px 5px 0 0
}

.klaus-preview-banner[hidden] {
    display: none
}

/* Das Kreuz bleibt eine barrierefrei beschriftete Schaltfläche, sieht aber wie ein reines Symbol aus. */
.klaus-close {
    position: sticky;
    top: 6px;
    float: right;
    margin: 8px 12px 0 0;
    z-index: 6;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #222;
    width: auto;
    height: auto;
    padding: 0 5px;
    box-shadow: none;
    font: normal 32px/1 Arial, sans-serif;
    cursor: pointer
}

.klaus-close:hover {
    color: #b00020;
    background: transparent
}

/* Die jeweils sichtbare Seite bestimmt nach dem Flip die Höhe; während der Animation wird die Höhe interpoliert. */
.klaus-flipper {
    min-height: 0;
    height: auto;
    transition: transform .75s ease, height .75s ease
}

.klaus-flipper.no-transition {
    transition: none
}

.klaus-front, .klaus-back {
    width: 100%;
    height: auto
}

.klaus-back {
    inset: 0 auto auto 0;
    overflow: visible
}

.klaus-flipper.show-back .klaus-back {
    position: relative;
    inset: auto
}

.klaus-flipper.show-back .klaus-front {
    position: absolute;
    inset: 0
}

.klaus-dialog.is-flipped .klaus-back {
    visibility: visible
}

.klaus-header {
    max-height: none;
    object-fit: contain
}

/* v1.4.1: Alle Button-Zustände gegen globale Theme-Regeln abschirmen.
   Die höhere Spezifität verhindert, dass gewöhnliche Theme-Hover-Regeln
   die Zustandsfarben des Quiz überschreiben. */
.klaus-quiz button.klaus-door,
.klaus-quiz button.klaus-door:hover,
.klaus-quiz button.klaus-door:focus,
.klaus-quiz button.klaus-door:active {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, .5);
    background-image: none;
    color: #f5bf37;
    border-style: solid;
    border-width: 2px;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    opacity: 1;
    transform: none;
}

.klaus-quiz button.klaus-door:hover,
.klaus-quiz button.klaus-door:focus,
.klaus-quiz button.klaus-door:active {
    /*outline: 2px solid #f5bf37;*/
    /*outline-offset: 1px;*/
    box-shadow: 0px 0px 25px 0px rgba(255, 255, 0, 0.9);
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 7px;
}

.klaus-quiz button.klaus-door.is-open {
    border-color: #3bd277
}

.klaus-quiz button.klaus-door.is-locked {
    border-color: #d4af37
}

.klaus-quiz .klaus-answers button,
.klaus-quiz .klaus-answers button:hover,
.klaus-quiz .klaus-answers button:focus,
.klaus-quiz .klaus-answers button:active,
.klaus-quiz .klaus-answers button:disabled {
    appearance: none;
    -webkit-appearance: none;
    background: #f5f5f5;
    background-image: none;
    color: #111;
    border: 2px solid #777;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    opacity: 1;
    transform: none;
    filter: none;
}

.klaus-quiz .klaus-answers button.is-correct,
.klaus-quiz .klaus-answers button.is-correct:hover,
.klaus-quiz .klaus-answers button.is-correct:focus,
.klaus-quiz .klaus-answers button.is-correct:active,
.klaus-quiz .klaus-answers button.is-correct:disabled {
    background: #b5edc6;
    border-color: #16883d;
    color: #111;
}

.klaus-quiz .klaus-answers button.is-wrong,
.klaus-quiz .klaus-answers button.is-wrong:hover,
.klaus-quiz .klaus-answers button.is-wrong:focus,
.klaus-quiz .klaus-answers button.is-wrong:active,
.klaus-quiz .klaus-answers button.is-wrong:disabled {
    background: #ffc7c7;
    border-color: #c62626;
    color: #111;
}

.klaus-quiz button.klaus-close,
.klaus-quiz button.klaus-close:hover,
.klaus-quiz button.klaus-close:focus,
.klaus-quiz button.klaus-close:active {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: #222;
    padding: 0 5px;
    width: auto;
    height: auto;
    text-decoration: none;
    transform: none;
    opacity: 1;
}

.klaus-quiz button.klaus-close:hover {
    color: #b00020
}

/* Die jeweils inaktive Seite darf weder eine eigene Scrollbar noch
   einen Höhenbeitrag erzeugen. Scrollen übernimmt allein der Dialog. */
.klaus-quiz .klaus-flipper {
    min-height: 0;
}

.klaus-quiz .klaus-front,
.klaus-quiz .klaus-back {
    overflow: visible;
    max-height: none;
    min-height: 0;
}

.klaus-quiz .klaus-flipper:not(.show-back) .klaus-back {
    position: absolute;
    inset: 0 auto auto 0;
}

.klaus-quiz .klaus-flipper.show-back .klaus-front {
    position: absolute;
    inset: 0 auto auto 0;
}

.klaus-quiz .klaus-flipper.show-back .klaus-back {
    position: relative;
    inset: auto;
}

/* v1.4.2: Die sichtbare Seite liegt im Layout, die andere absolut darüber.
   Keine feste Höhe und kein eigener Scrollbereich an den Kartenflächen. */
.klaus-quiz .klaus-flipper:not(.show-back) .klaus-front {
    position: relative;
    inset: auto
}

.klaus-quiz .klaus-flipper:not(.show-back) .klaus-back {
    position: absolute;
    inset: 0 auto auto 0
}

.klaus-quiz .klaus-flipper.show-back .klaus-front {
    position: absolute;
    inset: 0 auto auto 0
}

.klaus-quiz .klaus-flipper.show-back .klaus-back {
    position: relative;
    inset: auto
}

.klaus-quiz .klaus-front, .klaus-quiz .klaus-back {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important
}

/* v1.4.3: Die Rückseite wird nur durch backface-visibility verborgen.
   visibility:hidden auf den echten Flächen würde beim Drehen das
   Umschalten stören; die inaktive Fläche ist stattdessen absolut. */
.klaus-quiz .klaus-dialog.is-flipped .klaus-front,
.klaus-quiz .klaus-dialog:not(.is-flipped) .klaus-back {
    visibility: visible;
}

.klaus-quiz .klaus-flipper {
    transition: transform .75s ease, height .75s ease;
}

.klaus-quiz .klaus-flipper.no-transition {
    transition: none;
}

/* v1.5.0: Unabhängige Dialoge: Keine Flipper-Höhen oder absolute Positionierung.
   Die Dialoghöhe folgt jeweils ihrem eigenen Inhalt. */
.klaus-quiz .klaus-question-dialog .klaus-front,
.klaus-quiz .klaus-explanation-dialog .klaus-back {
    position: static;
    inset: auto;
    transform: none;
    visibility: visible;
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
    backface-visibility: visible;
}

.klaus-explanation-dialog {
    -webkit-animation: slit-in-horizontal 0.45s ease-out both;
    animation: slit-in-horizontal 0.45s ease-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-10-22 20:9:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-ver-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-ver-right {
    0% {
        -webkit-transform: rotateY(-80deg);
        transform: rotateY(-80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 1;
    }
}

@keyframes flip-in-ver-right {
    0% {
        -webkit-transform: rotateY(-80deg);
        transform: rotateY(-80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 1;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-10-22 20:11:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slit-in-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes slit-in-horizontal {
    0% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
    }
}

@keyframes slit-in-horizontal {
    0% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
    }
}

.klaus-quiz .klaus-dialog {
    height: fit-content;
    max-height: 88dvh;
    overflow-y: auto;
}

.klaus-quiz .klaus-dialog:not([open]) {
    display: none;
}