/* ==========================================================
   Messertyp Quiz – Frontend v1.2 (Editorial Brand)
   Brand-Palette: Chili-Rot + Chili-Grün, Holzkohle/Eiche
   ========================================================== */

.mquiz-wrap {
    /* Brand */
    --mq-chili-red:    #d72638;       /* Hauptakzent (CTA, Progress, Ja) */
    --mq-chili-red-dk: #b51d2e;       /* Hover-State Rot */
    --mq-chili-green:  #1a8754;       /* Sekundär-Akzent (Ja-Hover, Bestätigung) */
    --mq-chili-green-dk: #166843;     /* Hover-State Grün */

    /* Surfaces */
    --mq-card-bg:   #ffffff;          /* Karte */
    --mq-card-edge: #ece6d8;          /* Eiche-Hairline */
    --mq-page-bg:   transparent;      /* Editorial: Karte „schwebt" auf der dunklen Section */

    /* Text */
    --mq-ink:        #1a1a1a;         /* Headings, primärer Text */
    --mq-ink-soft:   #3a3530;         /* Body */
    --mq-muted:      #7a6f63;         /* Sekundär */
    --mq-muted-soft: #b8aea1;         /* tertiär (Nummern, Decoration) */

    /* Geometry */
    --mq-radius-card:   18px;
    --mq-radius-btn:    999px;
    --mq-radius-answer: 16px;

    /* Shadow */
    --mq-shadow:
        0 24px 60px -24px rgba(20, 16, 12, 0.30),
        0 4px 12px -4px rgba(20, 16, 12, 0.12);

    /* Motion */
    --mq-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mq-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

    max-width: 820px;
    margin: 2em auto;
    padding: 0 16px;
    color: var(--mq-ink-soft);
    font-size: 17px;
    line-height: 1.6;
    box-sizing: border-box;
}

.mquiz-wrap *,
.mquiz-wrap *::before,
.mquiz-wrap *::after { box-sizing: border-box; }

/* Theme-Fonts (Inter via Header-Plugin oder Theme) erben */
.mquiz-wrap.mq-theme-fonts {
    font-family: var(--global-body-font-family, 'Inter', system-ui, -apple-system, sans-serif);
}
.mquiz-wrap.mq-theme-fonts h2,
.mquiz-wrap.mq-theme-fonts h3,
.mquiz-wrap.mq-theme-fonts .mquiz-result-title {
    font-family: var(--global-heading-font-family, 'Inter', system-ui, sans-serif);
}

/* ----- Card ----- */
.mquiz-card {
    background: var(--mq-card-bg);
    border-radius: var(--mq-radius-card);
    box-shadow: var(--mq-shadow);
    padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mq-card-edge);
}
/* Top-Akzent: schmaler Verlauf Grün → Rot (Chili-Frische → Chili-Schärfe) */
.mquiz-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--mq-chili-green) 0%,
        var(--mq-chili-green) 30%,
        var(--mq-chili-red) 70%,
        var(--mq-chili-red) 100%
    );
}

/* ----- Screens ----- */
.mquiz-screen {
    animation: mquiz-fade .45s var(--mq-ease);
}
.mquiz-screen[hidden] { display: none; }

@keyframes mquiz-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Typography ----- */
.mquiz-title {
    font-size: clamp(1.8em, 4.5vw, 2.6em);
    line-height: 1.1;
    color: var(--mq-ink) !important;
    margin: 0 0 .4em;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.mquiz-subtitle {
    font-size: 1.05em;
    color: var(--mq-muted) !important;
    margin: 0 0 1.8em;
    font-style: italic;
    line-height: 1.5;
}
.mquiz-intro { margin: 0 0 2em; }
.mquiz-intro p {
    margin: 0 0 .9em;
    color: var(--mq-ink-soft) !important;
}
.mquiz-intro p:last-child { margin-bottom: 0; }

.mquiz-divider {
    height: 1px;
    background: var(--mq-card-edge);
    margin: 1.8em 0;
    border: 0;
}
.mquiz-divider-soft {
    background: var(--mq-card-edge);
    opacity: 0.6;
    margin: 2em 0;
}

/* ----- Buttons ----- */
.mquiz-wrap .mquiz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s var(--mq-ease), color .25s var(--mq-ease), transform .2s var(--mq-ease), box-shadow .25s var(--mq-ease);
    -webkit-appearance: none;
    appearance: none;
    will-change: transform;
}

/* Klare, sichtbare Fokus-Ringe für Tastatur-User */
.mquiz-wrap :focus-visible {
    outline: 3px solid var(--mq-chili-red);
    outline-offset: 3px;
}

/* ----- Primary-Button (Quiz starten / Neu starten) ----- */
.mquiz-wrap .mquiz-btn-primary,
.mquiz-wrap button.mquiz-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5em !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    border: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px -4px rgba(10, 10, 10, 0.35) !important;
    min-height: 48px !important;
    width: auto !important;
    height: auto !important;
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.mquiz-wrap .mquiz-btn-primary:hover,
.mquiz-wrap button.mquiz-btn-primary:hover {
    background-color: #d72638 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(215, 38, 56, 0.40) !important;
}
.mquiz-wrap .mquiz-btn-primary:hover .mquiz-arrow {
    transform: translateX(5px);
}
.mquiz-arrow {
    display: inline-block;
    transition: transform .25s var(--mq-ease);
    font-size: 1.1em;
}

/* ----- Link-Button (Mehr lesen, Zurücksetzen) ----- */
.mquiz-wrap .mquiz-btn-link,
.mquiz-wrap button.mquiz-btn-link {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #7a6f63 !important;
    cursor: pointer !important;
    padding: 8px 4px !important;
    font: inherit !important;
    font-size: .95em !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(0,0,0,.25) !important;
    min-height: 44px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}
.mquiz-wrap .mquiz-btn-link:hover,
.mquiz-wrap button.mquiz-btn-link:hover {
    color: #d72638 !important;
    text-decoration-color: #d72638 !important;
    background: transparent !important;
    background-color: transparent !important;
    transform: none !important;
}

/* ----- Progress ----- */
.mquiz-progress { margin-bottom: 2.4em; }
.mquiz-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .55em;
    gap: 1em;
}
.mquiz-progress-text {
    font-size: .78em;
    color: var(--mq-muted) !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}
/* Tastatur-Shortcut-Anzeige (App-Feel) */
.mquiz-progress-shortcuts {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: .72em;
    color: var(--mq-muted-soft) !important;
    font-weight: 500;
}
.mquiz-progress-shortcuts kbd {
    display: inline-block;
    padding: 2px 7px;
    background: var(--mq-card-edge);
    color: var(--mq-ink) !important;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.mquiz-shortcut-divider { opacity: .5; }
/* Auf Mobile: Shortcuts-Hint ausblenden (Touch-User braucht's nicht) */
@media (max-width: 540px) {
    .mquiz-progress-shortcuts { display: none; }
}

.mquiz-progress-bar {
    height: 4px;
    background: var(--mq-card-edge);
    border-radius: 999px;
    overflow: hidden;
}
/* Fortschritt: Verlauf von Grün (Start) zu Rot (Ende) */
.mquiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--mq-chili-green) 0%,
        var(--mq-chili-red) 100%
    );
    background-size: 100vw 100%;
    background-position: 0 0;
    width: 0%;
    border-radius: 999px;
    transition: width .55s var(--mq-ease);
}

/* ----- Indicator-Dots (App-Feel) ----- */
.mquiz-dots {
    display: flex;
    gap: 6px;
    margin-top: .9em;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.mquiz-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mq-card-edge);
    transition: background-color .25s var(--mq-ease), transform .25s var(--mq-ease);
}
.mquiz-dot.is-answered.is-yes {
    background: var(--mq-chili-green);
}
.mquiz-dot.is-answered.is-no {
    background: var(--mq-chili-red);
}
.mquiz-dot.is-current {
    background: var(--mq-ink);
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(20, 16, 12, 0.08);
}
.mquiz-dot.is-current.is-answered.is-yes {
    background: var(--mq-chili-green);
    box-shadow: 0 0 0 3px rgba(26, 135, 84, 0.18);
}
.mquiz-dot.is-current.is-answered.is-no {
    background: var(--mq-chili-red);
    box-shadow: 0 0 0 3px rgba(215, 38, 56, 0.18);
}

/* ----- Question ----- */
.mquiz-question-wrap {
    text-align: center;
    padding: 1em 0 1.5em;
}

/* Animation-Container — bekommt slide-Klassen vom JS */
.mquiz-question-content {
    transition: opacity .18s var(--mq-ease), transform .18s var(--mq-ease);
    will-change: opacity, transform;
}
.mquiz-question-content.is-leaving-left {
    opacity: 0;
    transform: translateX(-32px);
}
.mquiz-question-content.is-leaving-right {
    opacity: 0;
    transform: translateX(32px);
}
.mquiz-question-content.is-entering-right {
    opacity: 0;
    transform: translateX(32px);
}
.mquiz-question-content.is-entering-left {
    opacity: 0;
    transform: translateX(-32px);
}

/* Stilisierte Frage-Nummer mit Akzent-Strich */
.mquiz-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    color: var(--mq-muted-soft) !important;
    font-size: 3.2em;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .25em;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.mquiz-question-number-mark {
    display: inline-block;
    width: 28px;
    height: 3px;
    background: var(--mq-chili-red);
    border-radius: 2px;
    /* Vertikal mittig zur großen Zahl ausrichten */
    align-self: center;
    transform: translateY(-0.05em);
}
.mquiz-question-number-text {
    display: inline-block;
}
.mquiz-question-text {
    font-size: clamp(1.3em, 3vw, 1.7em);
    line-height: 1.3;
    color: var(--mq-ink) !important;
    margin: 0 0 1.8em;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* ----- Tap-Feedback Animation ----- */
@keyframes mquiz-tap {
    0%   { transform: translateY(-2px) scale(1); }
    35%  { transform: translateY(-2px) scale(0.96); }
    65%  { transform: translateY(-3px) scale(1.04); }
    100% { transform: translateY(-2px) scale(1); }
}
.mquiz-wrap .mquiz-btn-answer.is-tapping {
    animation: mquiz-tap .35s var(--mq-ease-snap);
}

/* Antwort-Tasten-Hint (kleiner Buchstabe oben rechts im Button) */
.mquiz-answer-key {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: .65em;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--mq-muted-soft);
    background: var(--mq-card-edge);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.3;
    opacity: .8;
    transition: opacity .2s, color .2s, background-color .2s;
}
.mquiz-wrap .mquiz-btn-answer:hover .mquiz-answer-key,
.mquiz-wrap .mquiz-btn-answer:focus-visible .mquiz-answer-key {
    opacity: 1;
}
/* Auf Mobile: Tasten-Hint ausblenden */
@media (max-width: 540px) {
    .mquiz-answer-key { display: none; }
}

/* ----- Answers ----- */
.mquiz-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}
.mquiz-wrap .mquiz-btn-answer,
.mquiz-wrap button.mquiz-btn-answer {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #ffffff !important;
    border: 1.5px solid var(--mq-card-edge) !important;
    color: #1a1a1a !important;
    padding: 22px 22px !important;
    border-radius: var(--mq-radius-answer) !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    min-height: 100px !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative;
    overflow: hidden;
}

/* "Ja" (data-answer="1") → Hover/aktiv: Chili-Grün (Bestätigung) */
.mquiz-wrap .mquiz-btn-answer[data-answer="1"]:hover,
.mquiz-wrap .mquiz-btn-answer[data-answer="1"]:focus-visible {
    border-color: var(--mq-chili-green) !important;
    color: var(--mq-chili-green-dk) !important;
    background: var(--mq-card-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(26, 135, 84, 0.35);
}
.mquiz-wrap .mquiz-btn-answer[data-answer="1"][aria-pressed="true"] {
    border-color: var(--mq-chili-green) !important;
    background: var(--mq-chili-green) !important;
    color: #ffffff !important;
}
.mquiz-wrap .mquiz-btn-answer[data-answer="1"][aria-pressed="true"] .mquiz-answer-icon {
    color: #ffffff !important;
}

/* "Nein" (data-answer="0", .mquiz-btn-answer-no) → Hover/aktiv: Chili-Rot (Schärfe) */
.mquiz-wrap .mquiz-btn-answer[data-answer="0"]:hover,
.mquiz-wrap .mquiz-btn-answer-no:hover,
.mquiz-wrap .mquiz-btn-answer[data-answer="0"]:focus-visible,
.mquiz-wrap .mquiz-btn-answer-no:focus-visible {
    border-color: var(--mq-chili-red) !important;
    color: var(--mq-chili-red-dk) !important;
    background: var(--mq-card-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(215, 38, 56, 0.35);
}
.mquiz-wrap .mquiz-btn-answer[data-answer="0"][aria-pressed="true"],
.mquiz-wrap .mquiz-btn-answer-no[aria-pressed="true"] {
    border-color: var(--mq-chili-red) !important;
    background: var(--mq-chili-red) !important;
    color: #ffffff !important;
}
.mquiz-wrap .mquiz-btn-answer[data-answer="0"][aria-pressed="true"] .mquiz-answer-icon,
.mquiz-wrap .mquiz-btn-answer-no[aria-pressed="true"] .mquiz-answer-icon {
    color: #ffffff !important;
}
.mquiz-answer-icon {
    font-size: 1.6em;
    line-height: 1;
    color: var(--mq-muted-soft) !important;
    transition: color .2s var(--mq-ease), transform .2s var(--mq-ease);
    font-weight: 400;
}
/* Hover-State: Icon nimmt die Brand-Farbe je nach Wahl an */
.mquiz-wrap .mquiz-btn-answer[data-answer="1"]:hover .mquiz-answer-icon,
.mquiz-wrap .mquiz-btn-answer[data-answer="1"]:focus-visible .mquiz-answer-icon {
    color: var(--mq-chili-green) !important;
    transform: scale(1.1);
}
.mquiz-wrap .mquiz-btn-answer[data-answer="0"]:hover .mquiz-answer-icon,
.mquiz-wrap .mquiz-btn-answer-no:hover .mquiz-answer-icon,
.mquiz-wrap .mquiz-btn-answer[data-answer="0"]:focus-visible .mquiz-answer-icon,
.mquiz-wrap .mquiz-btn-answer-no:focus-visible .mquiz-answer-icon {
    color: var(--mq-chili-red) !important;
    transform: scale(1.1);
}
.mquiz-answer-label {
    font-size: .95em;
    letter-spacing: .02em;
}

.mquiz-nav {
    text-align: center;
    margin-top: 1.8em;
}
.mquiz-nav .mquiz-prev[hidden] { display: none; }

/* ----- Result ----- */
.mquiz-screen-result {
    text-align: center;
}
.mquiz-result-badge {
    display: inline-block;
    background: var(--mq-chili-red);
    color: #ffffff;
    padding: 9px 22px;
    border-radius: 999px;
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    margin-bottom: 1.2em;
    line-height: 1;
}
.mquiz-result-title {
    font-size: clamp(2.1em, 5.5vw, 3em);
    color: var(--mq-ink) !important;
    margin: 0 0 .25em;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.025em;
    outline: none;
}
.mquiz-result-score {
    color: var(--mq-muted) !important;
    font-size: .92em;
    margin-bottom: .5em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.mquiz-result-description {
    text-align: left;
    margin: 1.5em auto 0;
    max-width: 560px;
    color: var(--mq-ink-soft) !important;
}
.mquiz-result-description p { margin: 0 0 1em; line-height: 1.65; color: var(--mq-ink-soft) !important; }
.mquiz-result-description p:last-child { margin-bottom: 0; }

/* CTA-Box: links roter Strich (Brand-Akzent), warmer Eiche-BG */
.mquiz-result-cta {
    background: rgba(215, 38, 56, 0.04);
    border-left: 3px solid var(--mq-chili-red);
    padding: 20px 24px;
    border-radius: 4px;
    margin: 2em auto 0;
    text-align: left;
    max-width: 560px;
    color: var(--mq-ink) !important;
    font-weight: 500;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.55;
}
.mquiz-result-cta:empty { display: none; }

.mquiz-wrap .mquiz-result-cta-button,
.mquiz-wrap .mquiz-closing-cta,
.mquiz-wrap a.mquiz-result-cta-button,
.mquiz-wrap a.mquiz-closing-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5em !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    margin-top: 1.4em !important;
    transition: background-color .25s var(--mq-ease), transform .2s var(--mq-ease), box-shadow .25s var(--mq-ease) !important;
    box-shadow: 0 4px 14px -4px rgba(10, 10, 10, 0.35) !important;
    min-height: 48px !important;
    border: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: auto !important;
    height: auto !important;
    text-transform: none !important;
}
.mquiz-wrap .mquiz-result-cta-button:hover,
.mquiz-wrap .mquiz-closing-cta:hover,
.mquiz-wrap a.mquiz-result-cta-button:hover,
.mquiz-wrap a.mquiz-closing-cta:hover {
    background-color: #d72638 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(215, 38, 56, 0.40) !important;
}

/* HTML hidden-Attribut respektieren — sonst überschreibt display:!important
   das Versteckt-Setzen vom JS und Buttons rendern leer als "schwarze Eier" */
.mquiz-wrap [hidden],
.mquiz-wrap a[hidden],
.mquiz-wrap button[hidden] {
    display: none !important;
}
/* Buttons mit leerem Text-Inhalt auch nicht rendern (Defense-in-Depth) */
.mquiz-wrap .mquiz-result-cta-button:empty,
.mquiz-wrap .mquiz-closing-cta:empty {
    display: none !important;
}

.mquiz-closing {
    color: var(--mq-muted) !important;
    font-style: italic;
    margin: 0 auto;
    max-width: 540px;
}
.mquiz-closing p { margin: 0 0 .8em; }

.mquiz-restart { margin-top: 1.5em; }

/* ----- Tablet ----- */
@media (max-width: 768px) {
    .mquiz-wrap { font-size: 16.5px; }
}

/* ----- Mobile ----- */
@media (max-width: 540px) {
    .mquiz-wrap {
        font-size: 16px;
        padding: 0 12px;
        margin: 1.5em auto;
    }
    .mquiz-card { padding: 28px 22px; }
    .mquiz-answers {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mquiz-btn-answer {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-height: 56px;
        padding: 16px 22px;
    }
    .mquiz-question-number { font-size: 2.4em; }
    .mquiz-result-cta-button,
    .mquiz-closing-cta {
        padding: 14px 26px;
    }
}

/* ----- Sehr kleine Screens ----- */
@media (max-width: 360px) {
    .mquiz-card { padding: 22px 18px; }
    .mquiz-btn-primary { padding: 14px 24px; font-size: 1em; }
}

/* ----- High contrast / forced colors (Windows) ----- */
@media (forced-colors: active) {
    .mquiz-btn,
    .mquiz-btn-answer {
        border: 2px solid CanvasText;
    }
    .mquiz-btn-answer[aria-pressed="true"] {
        background: Highlight;
        color: HighlightText;
    }
    .mquiz-progress-fill {
        background: Highlight;
    }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .mquiz-screen,
    .mquiz-progress-fill,
    .mquiz-btn,
    .mquiz-btn-answer,
    .mquiz-arrow,
    .mquiz-result-cta-button,
    .mquiz-closing-cta {
        animation: none !important;
        transition: none !important;
    }
    .mquiz-btn:hover,
    .mquiz-btn-answer:hover {
        transform: none !important;
    }
}