/* =============================================
   QUIZ - Einheitliches Design mit Testphase
   ============================================= */

/* Seiten-Hintergrund */
body, html {
    background: #0a0a12 !important;
}

.site-content, #content, main, .content-area,
.elementor-section-wrap, .elementor-inner,
.elementor-container, .elementor-widget-wrap,
.elementor-widget-container {
    background: transparent !important;
}

/* === QUIZ CARD - weißen Hintergrund überschreiben === */
.tqb-shortcode-wrapper *,
.tqb-quiz-main-container *,
[id*="tqb-shortcode-wrapper"] * {
    box-sizing: border-box;
}

/* Alle weißen/hellen Hintergründe im Quiz dunkel machen */
.tqb-shortcode-wrapper,
.tqb-shortcode-wrapper > div,
.tqb-quiz-main-container,
.tqb-quiz-page-container,
.tqb-quiz-page,
.tqb-quiz-content,
.tqb-quiz-start-page,
.tqb-quiz-question-page,
.tqb-quiz-result-page,
[id^="tqb-shortcode-wrapper"],
[class^="tqb-"],
[class*=" tqb-"] {
    background: linear-gradient(145deg, #1a1a2e, #0f0f1a) !important;
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

/* Quiz Wrapper Styling */
.tqb-shortcode-wrapper {
    border: 1px solid rgba(232, 185, 35, 0.25) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    max-width: 650px !important;
    margin: 40px auto !important;
}

/* Alle Texte weiß */
.tqb-shortcode-wrapper h1,
.tqb-shortcode-wrapper h2,
.tqb-shortcode-wrapper h3,
.tqb-shortcode-wrapper h4,
.tqb-shortcode-wrapper h5,
.tqb-shortcode-wrapper p,
.tqb-shortcode-wrapper span:not(.tcb-button-link span),
.tqb-shortcode-wrapper li,
.tqb-shortcode-wrapper label,
.tqb-shortcode-wrapper div {
    color: #ffffff !important;
}

/* Buttons - Gold */
.tqb-shortcode-wrapper .tcb-button-link,
.tqb-shortcode-wrapper a.tcb-button-link,
.tqb-shortcode-wrapper [class*="tqb-btn"],
.tqb-shortcode-wrapper [class*="tqb-button"],
.tqb-shortcode-wrapper button {
    background: linear-gradient(135deg, #e8b923, #d4a520) !important;
    background-color: #e8b923 !important;
    color: #0a0a12 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(232, 185, 35, 0.4) !important;
}

.tqb-shortcode-wrapper .tcb-button-link:hover,
.tqb-shortcode-wrapper button:hover {
    background: linear-gradient(135deg, #f5d030, #e8b923) !important;
    background-color: #f5d030 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 30px rgba(232, 185, 35, 0.55) !important;
    color: #0a0a12 !important;
}

/* Antwort-Optionen */
.tqb-shortcode-wrapper [class*="tqb-answer"],
.tqb-shortcode-wrapper [class*="tqb-option"],
.tqb-shortcode-wrapper .tqb-quiz-answer,
.tqb-shortcode-wrapper li.tqb-answer {
    background: rgba(255, 255, 255, 0.07) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: all 0.2s ease !important;
}

.tqb-shortcode-wrapper [class*="tqb-answer"]:hover,
.tqb-shortcode-wrapper [class*="tqb-option"]:hover,
.tqb-shortcode-wrapper li.tqb-answer:hover {
    background: rgba(232, 185, 35, 0.12) !important;
    border-color: rgba(232, 185, 35, 0.45) !important;
}

/* Ausgewählte Antwort - klar erkennbar */
.tqb-shortcode-wrapper [class*="tqb-answer"].tqb-selected,
.tqb-shortcode-wrapper [class*="tqb-answer"][class*="selected"],
.tqb-shortcode-wrapper [class*="tqb-answer"][class*="active"],
.tqb-shortcode-wrapper [class*="tqb-answer"][class*="checked"],
.tqb-shortcode-wrapper li.tqb-answer.tqb-selected,
.tqb-shortcode-wrapper li.tqb-answer input:checked ~ span {
    background: rgba(232, 185, 35, 0.2) !important;
    border-color: #e8b923 !important;
    border-width: 2px !important;
}

/* Radio-Buttons verstecken */
.tqb-shortcode-wrapper input[type="radio"],
.tqb-shortcode-wrapper input[type="checkbox"] {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

/* Text in Antworten - alle Hintergründe entfernen */
.tqb-shortcode-wrapper [class*="tqb-answer"] *,
.tqb-shortcode-wrapper [class*="tqb-answer"] span,
.tqb-shortcode-wrapper [class*="tqb-answer"] p,
.tqb-shortcode-wrapper [class*="tqb-answer"] div,
.tqb-shortcode-wrapper [class*="tqb-answer"] label,
.tqb-shortcode-wrapper [class*="tqb-option"] *,
.tqb-shortcode-wrapper li.tqb-answer *,
.tqb-shortcode-wrapper li.tqb-answer span {
    user-select: none !important;
    -webkit-user-select: none !important;
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Text-Selektion deaktivieren */
.tqb-shortcode-wrapper [class*="tqb-answer"]::selection,
.tqb-shortcode-wrapper [class*="tqb-answer"] *::selection {
    background: transparent !important;
    color: #ffffff !important;
}

.tqb-shortcode-wrapper [class*="tqb-answer"]::-moz-selection,
.tqb-shortcode-wrapper [class*="tqb-answer"] *::-moz-selection {
    background: transparent !important;
    color: #ffffff !important;
}

/* Fortschrittsbalken */
.tqb-shortcode-wrapper [class*="progress"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.tqb-shortcode-wrapper [class*="progress-bar"]:not([class*="wrapper"]):not([class*="container"]) {
    background: #e8b923 !important;
    border-radius: 10px !important;
}

/* Eingabefelder */
.tqb-shortcode-wrapper input[type="text"],
.tqb-shortcode-wrapper input[type="email"] {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

.tqb-shortcode-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}