/* TelccFree — centralized B2 Lesen highlighter + premium bulb (Teil 1/2/3) */

/* ── Premium glassmorphic bulb ── */
.bulb-btn,
.hint-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  font-size: 26px !important;
  line-height: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease !important;
  will-change: transform, box-shadow !important;
}

.question-card h3 .bulb-btn,
.question-card h3 .hint-btn {
  position: sticky !important;
  top: 24px !important;
}

.bulb-btn::before,
.hint-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 140% !important;
  height: 140% !important;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.25) 0%, rgba(253, 224, 71, 0) 70%) !important;
  transform: translate(-50%, -50%) scale(0) !important;
  transition: transform 0.4s ease, opacity 0.4s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.bulb-btn__icon {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  line-height: 1 !important;
}

@keyframes bulb-invite-pulse {
  0%, 100% { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 16px rgba(253, 224, 71, 0.2); }
  50% { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32), 0 0 28px rgba(253, 224, 71, 0.38); }
}

.bulb-btn:hover,
.hint-btn:hover {
  transform: translateY(-3px) scale(1.06) !important;
  border-color: rgba(253, 224, 71, 0.4) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(253, 224, 71, 0.25) !important;
  animation: bulb-invite-pulse 1.8s ease-in-out infinite !important;
}

.bulb-btn:hover::before,
.hint-btn:hover::before {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
}

.bulb-btn:hover .bulb-btn__icon,
.hint-btn:hover .bulb-btn__icon {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 12px rgba(253, 224, 71, 0.85)) saturate(1.5) !important;
}

.bulb-btn:active,
.hint-btn:active {
  transform: translateY(1px) scale(0.94) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.1s ease !important;
  animation: none !important;
}

.bulb-btn.is-active,
.hint-btn.is-active {
  border-color: rgba(57, 255, 20, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.35), 0 0 22px rgba(57, 255, 20, 0.32) !important;
}

.bulb-btn.is-active::before,
.hint-btn.is-active::before {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(57, 255, 20, 0.28) 0%, rgba(57, 255, 20, 0) 70%) !important;
}

.bulb-btn.is-active .bulb-btn__icon,
.hint-btn.is-active .bulb-btn__icon {
  filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.75)) saturate(1.35) !important;
}

.bulb-btn.is-active.is-trap,
.hint-btn.is-active.is-trap {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 0 20px rgba(245, 158, 11, 0.28) !important;
}

.bulb-btn.is-active.is-trap::before,
.hint-btn.is-active.is-trap::before {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, rgba(251, 191, 36, 0) 70%) !important;
}

html.dark .bulb-btn,
html.dark .hint-btn {
  background: linear-gradient(135deg, #1e293b 0%, #020617 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Teil 1 layout ── */
.question-box .email-fields {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

@media (min-width: 992px) {
  .question-box .email-fields { margin-bottom: 10px; }
}

.question-box .email-fields .drop-target {
  flex: 1;
  min-width: 0;
}

/* ── Teil 2 layout ── */
.question-card h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* ── Teil 3 layout ── */
.question-box .teil3-drop-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}

.question-box .teil3-drop-row .drop-target {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.lesen-t3-no-match {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: 4px;
  padding: 5px 10px;
  font-size: 0.8em;
  font-style: italic;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

html.dark .lesen-t3-no-match {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── Evidence highlights + pen (GPU-accelerated) ── */
.dynamic-evidence-clue {
  background-image: linear-gradient(120deg, rgba(57, 255, 20, 0.45) 0%, rgba(57, 255, 20, 0.45) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important;
  background-position: 0 0 !important;
  display: inline !important;
  font-weight: normal !important;
  transition: background-size 1.4s linear !important;
}

.dynamic-evidence-clue.painted {
  background-size: 100% 100% !important;
}

.dynamic-evidence-clue.trap-topic {
  background-image: linear-gradient(120deg, rgba(251, 191, 36, 0.4) 0%, rgba(251, 191, 36, 0.4) 100%) !important;
}

/* Dark Mode: neon evidence wash washed out light body text — use denser bands + light glyph color. */
html.dark .dynamic-evidence-clue {
  background-image: linear-gradient(120deg, rgba(22, 163, 74, 0.58) 0%, rgba(22, 163, 74, 0.58) 100%) !important;
  color: #f0fdf4 !important;
  box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.35);
  border-radius: 2px;
  padding: 0 0.04em;
}

html.dark .dynamic-evidence-clue.trap-topic {
  background-image: linear-gradient(120deg, rgba(180, 83, 9, 0.58) 0%, rgba(180, 83, 9, 0.58) 100%) !important;
  color: #fffbeb !important;
  box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.4);
}

.single-highlighter-pen {
  position: fixed !important;
  font-size: 26px !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  opacity: 0;
  will-change: top, left, opacity !important;
  transform: translate3d(-4px, -30px, 0) !important;
  line-height: 1 !important;
  transition: top 0.25s linear, left 1.4s linear, opacity 0.3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .bulb-btn,
  .hint-btn {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    animation: none !important;
  }
  .bulb-btn:hover,
  .hint-btn:hover { transform: none !important; }
  .single-highlighter-pen { display: none !important; }
  .dynamic-evidence-clue.painted { transition: none !important; }
}

/* ── Unified Lesen Teil 1 + Teil 3: paragraph text parity + green correct feedback ── */
:root {
  --telc-lesen-body-text: #555;
  --telc-success-green: #28a745;
  --telc-success-green-bg: #d4edda;
  --telc-success-green-border: #28a745;
}

/* Match Teil 1 paragraph blocks: color #555, normal weight, full opacity */
.question-box .question-text {
  color: var(--telc-lesen-body-text) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  font-size: 0.8em !important;
  line-height: 1.5 !important;
}

@media (min-width: 992px) {
  .question-box .question-text {
    font-size: 0.9em !important;
    line-height: 1.6 !important;
  }
}

.question-box .question-text h4 {
  color: var(--telc-lesen-body-text) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Solid green instant feedback on correct drop (Teil 1 & Teil 3) */
.question-box .drop-target.correct {
  background-color: var(--telc-success-green-bg) !important;
  border: 2px solid var(--telc-success-green-border) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.question-box .drop-target.correct::after {
  color: var(--telc-success-green) !important;
}

.question-box .drop-target.correct .draggable {
  background-color: var(--telc-success-green) !important;
  color: #ffffff !important;
  border-color: var(--telc-success-green) !important;
}

html.dark .question-box .question-text,
html.dark .question-box .question-text h4 {
  color: var(--telc-dark-text-soft, #cbd5e1) !important;
  opacity: 1 !important;
}

html.dark .question-box .drop-target.correct {
  background-color: rgba(40, 167, 69, 0.22) !important;
  border-color: #34d058 !important;
}

html.dark .question-box .drop-target.correct::after {
  color: #4ade80 !important;
}

html.dark .question-box .drop-target.correct .draggable {
  background-color: #28a745 !important;
  color: #ffffff !important;
}

/* ── Lesen Teil 2: reading column + radio green feedback (Großraumbüros etc.) ── */
.text-section p,
.text-section h2 {
  color: var(--telc-lesen-body-text) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.text-section h2 {
  font-weight: 600 !important;
}

.question-card label {
  color: var(--telc-lesen-body-text) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.question-card label.option-correct,
.question-card label.option-selected-correct {
  background-color: var(--telc-success-green-bg) !important;
  border: 2px solid var(--telc-success-green-border) !important;
  color: #155724 !important;
  font-weight: 600 !important;
}

.question-card label.option-wrong {
  background-color: #f8d7da !important;
  border: 2px solid #dc3545 !important;
  color: #721c24 !important;
}

.question-card.correct {
  background-color: var(--telc-success-green-bg) !important;
  border-color: var(--telc-success-green-border) !important;
}

/* Teil 3 answer-pool text parity with Teil 1 paragraphs */
.right-column-content .draggable {
  color: var(--telc-lesen-body-text) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

html.dark .text-section p,
html.dark .text-section h2,
html.dark .question-card label,
html.dark .right-column-content .draggable {
  color: var(--telc-dark-text-soft, #cbd5e1) !important;
}

html.dark .question-card label.option-correct,
html.dark .question-card label.option-selected-correct {
  background-color: rgba(40, 167, 69, 0.22) !important;
  border-color: #34d058 !important;
  color: #86efac !important;
}