/* ============================================================
       TABS
    ============================================================ */
    .tab-bar {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 2rem;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .tab-bar::-webkit-scrollbar {
      display: none;
    }

    .tab-btn {
      padding: .85rem 1.5rem;
      background: transparent;
      border: none;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
      color: var(--clr-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: .5rem;
      transition: color .2s, border-color .2s;
      white-space: nowrap;
      min-height: 48px;
      touch-action: manipulation;
    }

    .tab-btn:hover {
      color: var(--text-color);
    }

    .tab-btn.active {
      color: var(--clr-accent-text);
      border-bottom-color: var(--clr-accent);
    }

    .tab-panel {
      display: none;
      animation: fadeIn .25s ease;
    }

    .tab-panel.active {
      display: block;
    }

    /* ============================================================
       EVA-DIAGRAMM
    ============================================================ */
    .eva-diagram {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 100%;
      margin: 2rem 0;
      flex-wrap: wrap;
    }

    .eva-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 2rem;
      border-radius: var(--radius);
      min-width: 140px;
      flex: 1;
      max-width: 220px;
      text-align: center;
      position: relative;
      transition: transform .3s ease, box-shadow .3s ease;
      cursor: default;
    }

    .eva-box:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .eva-box .eva-letter {
      font-size: 3rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: .4rem;
    }

    .eva-box .eva-word {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: .3rem;
    }

    .eva-box .eva-desc {
      font-size: .8rem;
      line-height: 1.4;
    }

    .eva-e {
      background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(167, 139, 250, .1));
      border: 2px solid #a78bfa;
      color: #a78bfa;
    }

    .eva-v {
      background: linear-gradient(135deg, rgba(56, 189, 248, .25), rgba(56, 189, 248, .1));
      border: 2px solid #38bdf8;
      color: #38bdf8;
    }

    .eva-a {
      background: linear-gradient(135deg, rgba(52, 211, 153, .25), rgba(52, 211, 153, .1));
      border: 2px solid #34d399;
      color: #34d399;
    }

    html[data-theme="light"] .eva-e {
      background: rgba(109, 40, 217, .08);
      border-color: #6d28d9;
      color: #6d28d9;
    }

    html[data-theme="light"] .eva-v {
      background: rgba(2, 132, 199, .08);
      border-color: #0284c7;
      color: #0284c7;
    }

    html[data-theme="light"] .eva-a {
      background: rgba(5, 150, 105, .08);
      border-color: #059669;
      color: #059669;
    }

    .eva-arrow {
      font-size: 2rem;
      color: var(--clr-muted);
      padding: 0 .5rem;
      flex-shrink: 0;
      align-self: center;
    }

    /* ============================================================
       BEISPIELKARTEN
    ============================================================ */
    .example-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      margin: 1.5rem 0;
    }

    .example-card {
      background: var(--panel-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 1.25rem;
      transition: var(--transition);
    }

    .example-card:hover {
      border-color: var(--clr-accent2);
      box-shadow: var(--shadow);
    }

    .example-card .ex-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--clr-accent2-text);
      margin-bottom: .75rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .example-card .ex-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: .4rem;
      font-size: .82rem;
    }

    .example-card .ex-cell {
      padding: .4rem .5rem;
      border-radius: 8px;
      text-align: center;
      line-height: 1.4;
      font-weight: 600;
    }

    .ex-cell.e-cell {
      background: rgba(167, 139, 250, .15);
      color: #a78bfa;
    }

    .ex-cell.v-cell {
      background: rgba(56, 189, 248, .15);
      color: #38bdf8;
    }

    .ex-cell.a-cell {
      background: rgba(52, 211, 153, .15);
      color: #34d399;
    }

    html[data-theme="light"] .ex-cell.e-cell {
      background: rgba(109, 40, 217, .08);
      color: #6d28d9;
    }

    html[data-theme="light"] .ex-cell.v-cell {
      background: rgba(2, 132, 199, .08);
      color: #0284c7;
    }

    html[data-theme="light"] .ex-cell.a-cell {
      background: rgba(5, 150, 105, .08);
      color: #059669;
    }

    .ex-cell .ex-label {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      display: block;
      margin-bottom: .15rem;
      font-weight: 700;
    }

    /* ============================================================
       TASK WRAPPER
    ============================================================ */
    .task-wrapper {
      background: var(--panel-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 1.75rem;
      margin-bottom: 1.75rem;
      box-shadow: var(--shadow-sm);
      transition: border-color .3s ease;
    }

    .task-wrapper.solved {
      border-color: var(--success);
    }

    .task-wrapper.failed {
      border-color: var(--danger);
    }

    .task-header {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }

    .task-num {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
      color: var(--clr-on-accent);
      font-weight: 800;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .task-meta {
      flex: 1;
      min-width: 0;
    }

    .task-meta h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: .3rem;
    }

    .task-meta p {
      color: var(--clr-muted);
      font-size: .9rem;
      line-height: 1.5;
    }

    .difficulty {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: .25rem .7rem;
      border-radius: 999px;
      flex-shrink: 0;
    }

    .diff-easy {
      background: rgba(52, 211, 153, .15);
      color: #34d399;
    }

    .diff-medium {
      background: rgba(251, 191, 36, .15);
      color: #fbbf24;
    }

    .diff-hard {
      background: rgba(248, 113, 113, .15);
      color: #f87171;
    }

    html[data-theme="light"] .diff-easy {
      background: rgba(5, 150, 105, .1);
      color: #059669;
    }

    html[data-theme="light"] .diff-medium {
      background: rgba(217, 119, 6, .1);
      color: #d97706;
    }

    html[data-theme="light"] .diff-hard {
      background: rgba(220, 38, 38, .1);
      color: #dc2626;
    }

    /* Trennlinien zwischen Schwierigkeitsstufen */
    .difficulty-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 2.5rem 0 1.5rem;
    }

    .difficulty-divider span {
      font-size: .8rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      white-space: nowrap;
      padding: .3rem .9rem;
      border-radius: 999px;
    }

    .difficulty-divider hr {
      flex: 1;
      border: none;
      border-top: 2px solid var(--border-color);
    }

    .div-easy span {
      background: rgba(52, 211, 153, .12);
      color: #34d399;
    }

    .div-medium span {
      background: rgba(251, 191, 36, .12);
      color: #fbbf24;
    }

    .div-hard span {
      background: rgba(248, 113, 113, .12);
      color: #f87171;
    }

    /* ============================================================
       DRAG & DROP
    ============================================================ */
    .dnd-container {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .dnd-source {
      flex: 1;
      min-width: 200px;
    }

    .dnd-source h4,
    .dnd-targets-label {
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--clr-muted);
      margin-bottom: .75rem;
    }

    .dnd-chips {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      min-height: 48px;
      padding: .5rem;
      border: 2px dashed var(--border-color);
      border-radius: 10px;
      transition: border-color .2s;
    }

    .dnd-chips.drag-over {
      border-color: var(--clr-accent2);
      background: rgba(56, 189, 248, .05);
    }

    .dnd-chip {
      padding: .55rem 1rem;
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 600;
      color: var(--text-color);
      cursor: grab;
      user-select: none;
      touch-action: none;
      min-height: 44px;
      display: flex;
      align-items: center;
      transition: transform .15s, box-shadow .15s, border-color .15s;
    }

    .dnd-chip:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: var(--clr-accent2);
    }

    .dnd-chip.dragging {
      opacity: .4;
      cursor: grabbing;
    }

    .dnd-chip.touch-ghost {
      position: fixed;
      pointer-events: none;
      z-index: 9000;
      opacity: .85;
      transform: scale(1.08);
      box-shadow: var(--shadow-lg);
    }

    .dnd-targets {
      flex: 2;
      min-width: 260px;
    }

    .dnd-drop-zones {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: .75rem;
    }

    .drop-zone {
      border-radius: 10px;
      border: 2px dashed var(--border-color);
      min-height: 80px;
      padding: .6rem;
      display: flex;
      flex-direction: column;
      gap: .4rem;
      transition: border-color .2s, background .2s;
    }

    .drop-zone.drag-over {
      border-color: var(--clr-accent);
      background: rgba(52, 211, 153, .06);
    }

    .drop-zone .dz-label {
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      text-align: center;
      margin-bottom: .3rem;
    }

    .drop-zone[data-target="E"] {
      border-color: rgba(167, 139, 250, .4);
    }

    .drop-zone[data-target="V"] {
      border-color: rgba(56, 189, 248, .4);
    }

    .drop-zone[data-target="A"] {
      border-color: rgba(52, 211, 153, .4);
    }

    .drop-zone[data-target="E"] .dz-label {
      color: #a78bfa;
    }

    .drop-zone[data-target="V"] .dz-label {
      color: #38bdf8;
    }

    .drop-zone[data-target="A"] .dz-label {
      color: #34d399;
    }

    .drop-zone.correct {
      border-color: var(--success) !important;
      background: rgba(52, 211, 153, .08);
    }

    .drop-zone.wrong {
      border-color: var(--danger) !important;
      background: rgba(248, 113, 113, .08);
    }

    /* Touch-Fallback */
    .touch-select-wrapper {
      display: none;
    }

    @media (pointer: coarse) {
      .touch-select-wrapper {
        display: block;
        margin-top: 1rem;
      }

      .touch-select-row {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .75rem;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: var(--box-bg);
        margin-bottom: .5rem;
        flex-wrap: wrap;
      }

      .touch-select-row span {
        flex: 1;
        font-size: .9rem;
        font-weight: 600;
        color: var(--text-color);
        min-width: 140px;
      }

      .touch-select-row select {
        background: var(--clr-bg);
        border: 1px solid var(--border-color);
        color: var(--text-color);
        padding: .4rem .6rem;
        border-radius: 8px;
        font-family: inherit;
        font-size: .85rem;
        font-weight: 600;
        cursor: pointer;
        min-width: 130px;
        min-height: 44px;
      }

      .dnd-container {
        display: none;
      }
    }

    /* ============================================================
       MULTIPLE CHOICE
    ============================================================ */
    .mc-options {
      display: flex;
      flex-direction: column;
      gap: .6rem;
      margin-top: .75rem;
    }

    .mc-option {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .85rem 1rem;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--box-bg);
      cursor: pointer;
      transition: var(--transition-fast);
      font-size: .95rem;
      color: var(--text-color);
      user-select: none;
      min-height: 52px;
      touch-action: manipulation;
    }

    .mc-option:hover:not(.disabled) {
      border-color: var(--clr-accent2);
      background: rgba(56, 189, 248, .06);
    }

    .mc-option.selected {
      border-color: var(--clr-accent2);
      background: rgba(56, 189, 248, .1);
    }

    .mc-option.correct {
      border-color: var(--success);
      background: rgba(52, 211, 153, .1);
    }

    .mc-option.wrong {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .1);
    }

    .mc-option.disabled {
      cursor: default;
    }

    .mc-radio {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .2s, background .2s;
    }

    .mc-option.selected .mc-radio {
      border-color: var(--clr-accent2);
      background: var(--clr-accent2);
    }

    .mc-option.correct .mc-radio {
      border-color: var(--success);
      background: var(--success);
    }

    .mc-option.wrong .mc-radio {
      border-color: var(--danger);
      background: var(--danger);
    }

    .mc-radio::after {
      content: '';
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--clr-on-accent);
      display: none;
    }

    .mc-option.selected .mc-radio::after,
    .mc-option.correct .mc-radio::after,
    .mc-option.wrong .mc-radio::after {
      display: block;
    }

    /* ============================================================
       LÜCKENTEXT
    ============================================================ */
    .cloze-wordlist {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      padding: .75rem 1rem;
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      margin-bottom: 1.25rem;
    }

    .cloze-wordlist-label {
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--clr-muted);
      width: 100%;
      margin-bottom: .25rem;
    }

    .word-chip {
      padding: .35rem .85rem;
      background: var(--panel-bg);
      border: 1px solid var(--border-color);
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 600;
      color: var(--text-color);
      transition: opacity .3s;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
    }

    .word-chip.used {
      opacity: .35;
      text-decoration: line-through;
      pointer-events: none;
    }

    .cloze-text {
      font-size: 1rem;
      line-height: 3;
      color: var(--text-color);
    }

    .cloze-input {
      display: inline-block;
      min-width: 110px;
      border: none;
      border-bottom: 2px solid var(--clr-accent2);
      background: transparent;
      color: var(--text-color);
      font-size: 1rem;
      font-family: inherit;
      font-weight: 700;
      padding: .1rem .4rem;
      text-align: center;
      outline: none;
      transition: border-color .2s, background .2s;
      -webkit-appearance: none;
    }

    .cloze-input:focus {
      border-color: var(--clr-accent);
      background: rgba(52, 211, 153, .06);
      border-radius: 4px 4px 0 0;
    }

    .cloze-input.correct {
      border-color: var(--success);
      color: var(--success-text);
    }

    .cloze-input.wrong {
      border-color: var(--danger);
      color: var(--danger-text);
    }

    /* ============================================================
       SORTIER-AUFGABE
    ============================================================ */
    .sort-list {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-top: .75rem;
      list-style: none;
    }

    .sort-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .85rem 1rem;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--box-bg);
      cursor: grab;
      user-select: none;
      transition: var(--transition-fast);
      font-size: .92rem;
      font-weight: 600;
      color: var(--text-color);
      touch-action: none;
      min-height: 52px;
    }

    .sort-item:hover {
      border-color: var(--clr-accent2);
      box-shadow: var(--shadow-sm);
    }

    .sort-item.dragging-sort {
      opacity: .5;
      cursor: grabbing;
    }

    .sort-item.drag-over-sort {
      border-color: var(--clr-accent);
      transform: translateY(-2px);
    }

    .sort-item.correct-sort {
      border-color: var(--success);
      background: rgba(52, 211, 153, .08);
    }

    .sort-item.wrong-sort {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .08);
    }

    .sort-handle {
      color: var(--clr-muted);
      font-size: 1.1rem;
      cursor: grab;
      padding: .25rem;
      min-width: 28px;
      text-align: center;
    }

    .sort-badge {
      margin-left: auto;
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: .2rem .6rem;
      border-radius: 999px;
      white-space: nowrap;
    }

    .sort-badge.e-badge {
      background: rgba(167, 139, 250, .15);
      color: #a78bfa;
    }

    .sort-badge.v-badge {
      background: rgba(56, 189, 248, .15);
      color: #38bdf8;
    }

    .sort-badge.a-badge {
      background: rgba(52, 211, 153, .15);
      color: #34d399;
    }

    .sort-arrows {
      display: flex;
      gap: .2rem;
      margin-left: .25rem;
    }

    .sort-arrow-btn {
      background: none;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--clr-muted);
      font-size: .95rem;
      cursor: pointer;
      padding: .15rem .4rem;
      min-width: 32px;
      min-height: 32px;
      touch-action: manipulation;
      transition: var(--transition-fast);
    }

    .sort-arrow-btn:hover {
      border-color: var(--clr-accent2);
      color: var(--clr-accent2-text);
    }

    /* ============================================================
       BILD-ZUORDNUNG
    ============================================================ */
    .image-match-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: .75rem;
      margin-top: .75rem;
    }

    .img-card {
      border: 2px solid var(--border-color);
      border-radius: var(--radius);
      padding: 1rem .75rem;
      text-align: center;
      transition: var(--transition-fast);
      background: var(--box-bg);
    }

    .img-card:hover:not(.disabled) {
      border-color: var(--clr-accent2);
      box-shadow: var(--shadow-sm);
    }

    .img-card .img-emoji {
      font-size: 2.2rem;
      display: block;
      margin-bottom: .5rem;
    }

    .img-card .img-name {
      font-size: .82rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: .5rem;
    }

    .img-card select {
      width: 100%;
      background: var(--clr-bg);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      padding: .4rem .5rem;
      border-radius: 8px;
      font-family: inherit;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .2s;
      appearance: none;
      text-align: center;
      min-height: 40px;
    }

    .img-card select:focus {
      border-color: var(--clr-accent);
      outline: none;
    }

    .img-card.correct-img {
      border-color: var(--success);
      background: rgba(52, 211, 153, .08);
    }

    .img-card.wrong-img {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .08);
    }

    /* ============================================================
       SZENARIO-KARTEN
    ============================================================ */
    .scenario-card {
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }

    .scenario-card .sc-title {
      font-weight: 700;
      color: var(--clr-accent2-text);
      margin-bottom: .75rem;
      font-size: .95rem;
    }

    .sc-steps {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    .sc-step {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .7rem .9rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--panel-bg);
      flex-wrap: wrap;
    }

    .sc-step-text {
      flex: 1;
      font-size: .88rem;
      color: var(--text-color);
      min-width: 140px;
    }

    .sc-step select {
      background: var(--clr-bg);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      padding: .4rem .5rem;
      border-radius: 8px;
      font-family: inherit;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      min-width: 130px;
      min-height: 44px;
    }

    .sc-step select:focus {
      border-color: var(--clr-accent);
      outline: none;
    }

    .sc-step.correct-step {
      border-color: var(--success);
      background: rgba(52, 211, 153, .07);
    }

    .sc-step.wrong-step {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .07);
    }

    /* ============================================================
       WAHR / FALSCH
    ============================================================ */
    .tf-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
      margin-top: .75rem;
    }

    .tf-card {
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.1rem;
    }

    .tf-card .tf-stmt {
      font-size: .92rem;
      color: var(--text-color);
      margin-bottom: .85rem;
      line-height: 1.5;
      font-weight: 600;
    }

    .tf-btns {
      display: flex;
      gap: .5rem;
    }

    .tf-btn {
      flex: 1;
      padding: .6rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--panel-bg);
      font-family: inherit;
      font-size: .85rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--text-color);
      transition: var(--transition-fast);
      min-height: 48px;
      touch-action: manipulation;
    }

    .tf-btn:hover:not(.disabled) {
      border-color: var(--clr-accent2);
      color: var(--clr-accent2-text);
    }

    .tf-btn.selected {
      border-color: var(--clr-accent2);
      background: rgba(56, 189, 248, .1);
      color: var(--clr-accent2-text);
    }

    .tf-btn.correct {
      border-color: var(--success);
      background: rgba(52, 211, 153, .12);
      color: var(--success-text);
    }

    .tf-btn.wrong {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .12);
      color: var(--danger-text);
    }

    .tf-btn.disabled {
      cursor: default;
    }

    /* ============================================================
       MEMORY  ── komplett überarbeitet
    ============================================================ */
    .memory-board {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: clamp(.35rem, 1.5vw, .85rem);
      margin-top: .75rem;
    }

    /* Karte */
    .mem-card {
      aspect-ratio: 3/4;
      border-radius: clamp(8px, 1.5vw, 14px);
      border: 2px solid var(--border-color);
      background: transparent;
      /* Hintergrund am inner */
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
      position: relative;
      perspective: 700px;
      /* 3-D-Kontext */
      transition: transform .15s, box-shadow .15s;
    }

    .mem-card:hover:not(.is-flipped):not(.is-matched) {
      transform: scale(1.05);
      border-color: var(--clr-accent2);
      box-shadow: var(--shadow);
    }

    /* Flip-Wrapper */
    .mem-card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform .4s ease;
      border-radius: inherit;
    }

    .mem-card.is-flipped .mem-card-inner,
    .mem-card.is-matched .mem-card-inner {
      transform: rotateY(180deg);
    }

    /* Vorder- & Rückseite */
    .mem-face {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(.2rem, .8vw, .45rem);
      padding: clamp(.3rem, .8vw, .6rem);
      overflow: hidden;
    }

    /* Vorderseite – Fragezeichen */
    .mem-face-front {
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      color: var(--clr-muted);
      font-size: clamp(1.4rem, 4vw, 2.5rem);
    }

    /* Rückseite – Inhalt */
    .mem-face-back {
      transform: rotateY(180deg);
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      color: #fff;
    }

    .mem-face-back.back-e,
    .mem-face-back.back-v,
    .mem-face-back.back-a {
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
    }

    .mem-face-back .mc-icon {
      font-size: clamp(1.2rem, 3.2vw, 2.2rem);
      line-height: 1;
      display: block;
    }

    .mem-face-back .mc-label {
      font-size: clamp(.58rem, 1.5vw, .9rem);
      font-weight: 700;
      text-align: center;
      word-break: break-word;
      hyphens: auto;
      display: block;
    }

    .mem-face-back .mc-sublabel {
      font-size: clamp(.5rem, 1.2vw, .72rem);
      opacity: .75;
      font-style: italic;
      display: block;
      text-align: center;
      word-break: break-word;
    }

    /* Zustände */
    .mem-card.is-matched {
      border-color: var(--success);
      box-shadow: 0 0 0 2px rgba(52, 211, 153, .4);
      cursor: default;
    }

    .mem-card.is-matched:hover {
      transform: none;
    }

    /* Falsch-Blitz */
    .mem-card.wrong-flash {
      animation: mem-wrong .5s ease;
    }

    @keyframes mem-wrong {

      0%,
      100% {
        border-color: var(--border-color);
      }

      40% {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(248, 113, 113, .3);
      }
    }

    /* Fortschritt */
    .mem-progress {
      font-size: .95rem;
      color: var(--clr-muted);
      margin-top: .85rem;
      text-align: center;
    }

    .mem-progress strong {
      color: var(--clr-accent-text);
    }

    /* Responsive */
    @media (max-width:900px) {
      .memory-board {
        grid-template-columns: repeat(6, 1fr);
      }
    }

    @media (max-width:700px) {
      .memory-board {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width:420px) {
      .memory-board {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* ============================================================
       AUFGABE 1 – TIPPE & ORDNE (Leicht)
    ============================================================ */
    .tap-legend {
      display: flex;
      gap: .75rem;
      flex-wrap: wrap;
      margin-bottom: .85rem;
    }

    .tap-leg-btn {
      padding: .55rem 1rem;
      border-radius: 999px;
      border: 2px solid var(--border-color);
      background: var(--box-bg);
      font-family: inherit;
      font-size: .85rem;
      font-weight: 700;
      cursor: pointer;
      touch-action: manipulation;
      min-height: 44px;
      transition: var(--transition-fast);
      color: var(--text-color);
    }

    .tap-leg-btn.active-e {
      border-color: #a78bfa !important;
      color: #a78bfa !important;
      background: rgba(167, 139, 250, .1) !important;
    }

    .tap-leg-btn.active-v {
      border-color: #38bdf8 !important;
      color: #38bdf8 !important;
      background: rgba(56, 189, 248, .1) !important;
    }

    .tap-leg-btn.active-a {
      border-color: #34d399 !important;
      color: #34d399 !important;
      background: rgba(52, 211, 153, .1) !important;
    }

    .tap-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: .75rem;
      margin-top: .75rem;
    }

    .tap-card {
      border: 2px solid var(--border-color);
      border-radius: 12px;
      padding: 1rem .75rem;
      text-align: center;
      background: var(--box-bg);
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
      transition: var(--transition-fast);
      min-height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .4rem;
    }

    .tap-card:hover:not(.disabled) {
      border-color: var(--clr-accent2);
    }

    .tap-card.sel-e {
      border-color: #a78bfa;
      background: rgba(167, 139, 250, .12);
    }

    .tap-card.sel-v {
      border-color: #38bdf8;
      background: rgba(56, 189, 248, .12);
    }

    .tap-card.sel-a {
      border-color: #34d399;
      background: rgba(52, 211, 153, .12);
    }

    .tap-card.correct-tap {
      border-color: var(--success);
      background: rgba(52, 211, 153, .12);
    }

    .tap-card.wrong-tap {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .1);
    }

    .tap-card.disabled {
      cursor: default;
    }

    .tap-card .tc-emoji {
      font-size: 2rem;
    }

    .tap-card .tc-name {
      font-size: .82rem;
      font-weight: 700;
      color: var(--text-color);
    }

    .tap-card .tc-sel {
      font-size: .72rem;
      font-weight: 700;
      padding: .15rem .5rem;
      border-radius: 999px;
      margin-top: .2rem;
      min-height: 20px;
    }

    .tc-sel.sel-e {
      background: rgba(167, 139, 250, .2);
      color: #a78bfa;
    }

    .tc-sel.sel-v {
      background: rgba(56, 189, 248, .2);
      color: #38bdf8;
    }

    .tc-sel.sel-a {
      background: rgba(52, 211, 153, .2);
      color: #34d399;
    }

    /* ============================================================
       AUFGABE 4 – ABLAUF-ANALYSE (Mittel)
    ============================================================ */
    .flow-builder {
      display: flex;
      flex-direction: column;
      gap: .6rem;
      margin-top: .75rem;
    }

    .flow-step {
      display: flex;
      align-items: center;
      gap: .85rem;
      padding: .85rem 1rem;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--box-bg);
      flex-wrap: wrap;
    }

    .flow-step-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
      color: var(--clr-on-accent);
      font-weight: 800;
      font-size: .9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .flow-step-text {
      flex: 1;
      font-size: .95rem;
      color: var(--text-color);
      font-weight: 600;
      min-width: 160px;
    }

    .flow-step select {
      background: var(--clr-bg);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      padding: .45rem .6rem;
      border-radius: 8px;
      font-family: inherit;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      min-width: 140px;
      min-height: 44px;
    }

    .flow-step select:focus {
      border-color: var(--clr-accent);
      outline: none;
    }

    .flow-step.correct-flow {
      border-color: var(--success);
      background: rgba(52, 211, 153, .07);
    }

    .flow-step.wrong-flow {
      border-color: var(--danger);
      background: rgba(248, 113, 113, .07);
    }

    .flow-arrow {
      text-align: center;
      color: var(--clr-muted);
      font-size: 1.3rem;
      line-height: 1;
    }

    /* ============================================================
       STATISTIK-PANEL
    ============================================================ */
    .stats-panel {
      background: var(--panel-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 1.75rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-sm);
    }

    .stats-panel h2 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--clr-accent-text);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    .stat-box {
      text-align: center;
      padding: 1rem;
      background: var(--box-bg);
      border-radius: 12px;
      border: 1px solid var(--border-color);
    }

    .stat-box .stat-val {
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: .3rem;
    }

    .stat-box .stat-label {
      font-size: .75rem;
      color: var(--clr-muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .stat-box.s-total .stat-val {
      color: var(--clr-accent2-text);
    }

    .stat-box.s-correct .stat-val {
      color: var(--success-text);
    }

    .stat-box.s-wrong .stat-val {
      color: var(--danger-text);
    }

    .stat-box.s-pts .stat-val {
      color: var(--warning-text);
    }

    .stat-box.s-streak .stat-val {
      color: #f97316;
    }

    .stats-progress-row {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: .5rem;
    }

    .stats-progress-row span {
      font-size: .82rem;
      color: var(--clr-muted);
      min-width: 80px;
    }

    .progress-bar {
      flex: 1;
      height: 8px;
      background: var(--border-color);
      border-radius: 999px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
      transition: width .6s ease;
    }

    .stats-percent {
      font-size: .88rem;
      font-weight: 700;
      color: var(--text-color);
      min-width: 40px;
      text-align: right;
    }

    .task-status-row {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .task-status-dot {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .78rem;
      font-weight: 700;
      color: var(--clr-muted);
      transition: all .3s ease;
      cursor: pointer;
      touch-action: manipulation;
    }

    .task-status-dot.st-done {
      background: rgba(52, 211, 153, .15);
      border-color: var(--success);
      color: var(--success-text);
    }

    .task-status-dot.st-wrong {
      background: rgba(248, 113, 113, .15);
      border-color: var(--danger);
      color: var(--danger-text);
    }

    .task-status-dot.st-part {
      background: rgba(251, 191, 36, .15);
      border-color: var(--warning);
      color: var(--warning-text);
    }

    .btn-reset-all {
      padding: .55rem 1.2rem;
      border-radius: 999px;
      background: transparent;
      color: var(--danger-text);
      border: 1px solid rgba(248, 113, 113, .3);
      font-weight: 600;
      font-size: .85rem;
      cursor: pointer;
      transition: var(--transition-fast);
      margin-top: 1rem;
      min-height: 44px;
      touch-action: manipulation;
    }

    .btn-reset-all:hover {
      background: rgba(248, 113, 113, .1);
      border-color: var(--danger);
    }

    /* ============================================================
       STREAK
    ============================================================ */
    .streak-banner {
      display: none;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.5rem;
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(249, 115, 22, .15), rgba(251, 191, 36, .1));
      border: 1px solid rgba(249, 115, 22, .35);
      margin-bottom: 1.5rem;
      animation: fadeIn .4s ease;
    }

    .streak-banner.show {
      display: flex;
    }

    .streak-fire {
      font-size: 2.5rem;
      animation: pulse-fire 1s ease-in-out infinite;
    }

    @keyframes pulse-fire {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.18);
      }
    }

    .streak-text h3 {
      font-size: 1.1rem;
      font-weight: 800;
      color: #f97316;
      margin-bottom: .15rem;
    }

    .streak-text p {
      font-size: .88rem;
      color: var(--clr-muted);
    }

    /* ============================================================
       BADGES
    ============================================================ */
    .badges-section h3 {
      font-size: .9rem;
      font-weight: 700;
      color: var(--clr-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: .85rem;
      margin-top: 1.5rem;
    }

    .badges-grid {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
    }

    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .4rem;
      padding: .85rem 1rem;
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      min-width: 90px;
      text-align: center;
      transition: var(--transition-fast);
      position: relative;
      filter: grayscale(1);
      opacity: .45;
    }

    .badge-item.unlocked {
      filter: none;
      opacity: 1;
      border-color: var(--badge-clr, var(--clr-accent));
      box-shadow: 0 0 0 1px var(--badge-clr, var(--clr-accent)), 0 4px 16px rgba(52, 211, 153, .15);
      animation: badge-pop .5s cubic-bezier(.175, .885, .32, 1.275);
    }

    @keyframes badge-pop {
      0% {
        transform: scale(.7);
        opacity: 0;
      }

      70% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .badge-item .badge-icon {
      font-size: 2rem;
      display: block;
    }

    .badge-item .badge-name {
      font-size: .75rem;
      font-weight: 700;
      color: var(--text-color);
      line-height: 1.3;
    }

    .badge-item .badge-desc {
      font-size: .67rem;
      color: var(--clr-muted);
      line-height: 1.3;
    }

    .badge-item .badge-new {
      position: absolute;
      top: -6px;
      right: -6px;
      background: #f97316;
      color: #fff;
      font-size: .62rem;
      font-weight: 800;
      padding: .15rem .45rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .05em;
      animation: badge-new-pulse 1.5s ease infinite;
    }

    @keyframes badge-new-pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, .5);
      }

      50% {
        box-shadow: 0 0 0 5px rgba(249, 115, 22, 0);
      }
    }

    /* ============================================================
       TASK ACTIONS & FEEDBACK
    ============================================================ */
    .task-actions {
      display: flex;
      gap: .75rem;
      flex-wrap: wrap;
      margin-top: 1.25rem;
      align-items: center;
    }

    .btn-check {
      padding: .7rem 1.5rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
      color: var(--clr-on-accent);
      border: none;
      font-weight: 700;
      font-size: .95rem;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 4px 12px rgba(52, 211, 153, .2);
      min-height: 48px;
      touch-action: manipulation;
    }

    .btn-check:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(52, 211, 153, .35);
    }

    .btn-check:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .btn-retry {
      padding: .6rem 1.2rem;
      border-radius: 999px;
      background: transparent;
      color: var(--clr-muted);
      border: 1px solid var(--border-color);
      font-weight: 600;
      font-size: .88rem;
      cursor: pointer;
      transition: var(--transition-fast);
      min-height: 48px;
      touch-action: manipulation;
    }

    .btn-retry:hover {
      color: var(--clr-accent2-text);
      border-color: var(--clr-accent2);
    }

    .task-points {
      margin-left: auto;
      font-size: .9rem;
      font-weight: 700;
      color: var(--clr-muted);
    }

    .task-points .pts {
      color: var(--clr-accent-text);
      font-size: 1.1rem;
    }

    .task-feedback {
      margin-top: .75rem;
      padding: .85rem 1rem;
      border-radius: 10px;
      font-size: .9rem;
      font-weight: 600;
      display: none;
    }

    .task-feedback.show {
      display: block;
    }

    .task-feedback.fb-success {
      background: rgba(52, 211, 153, .1);
      color: var(--success-text);
      border: 1px solid rgba(52, 211, 153, .3);
    }

    .task-feedback.fb-error {
      background: rgba(248, 113, 113, .1);
      color: var(--danger-text);
      border: 1px solid rgba(248, 113, 113, .3);
    }

    .task-feedback.fb-partial {
      background: rgba(251, 191, 36, .1);
      color: var(--warning-text);
      border: 1px solid rgba(251, 191, 36, .3);
    }

    /* ============================================================
       KNOW-BOX & ACCORDION
    ============================================================ */
    .know-box {
      background: var(--box-bg);
      border-left: 4px solid var(--clr-accent2);
      border-radius: 0 10px 10px 0;
      padding: 1rem 1.25rem;
      margin: 1rem 0;
      font-size: .9rem;
      color: var(--clr-muted);
      line-height: 1.6;
    }

    .know-box strong {
      color: var(--text-color);
    }

    .acc-item {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: .6rem;
    }

    .acc-btn {
      width: 100%;
      background: var(--box-bg);
      border: none;
      padding: .9rem 1.25rem;
      text-align: left;
      font-family: inherit;
      font-size: .95rem;
      font-weight: 600;
      color: var(--text-color);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background .2s;
      min-height: 52px;
      touch-action: manipulation;
    }

    .acc-btn:hover {
      background: rgba(56, 189, 248, .08);
    }

    .acc-btn .acc-arrow {
      transition: transform .3s ease;
      color: var(--clr-muted);
    }

    .acc-btn.open .acc-arrow {
      transform: rotate(180deg);
    }

    .acc-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .35s ease;
      padding: 0 1.25rem;
      background: var(--panel-bg);
      font-size: .9rem;
      color: var(--clr-muted);
      line-height: 1.6;
    }

    .acc-body.open {
      max-height: 300px;
      padding: .75rem 1.25rem 1rem;
    }

    /* ============================================================
       TOAST
    ============================================================ */
    .toast-container {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .6rem;
      z-index: 5000;
    }

    .toast {
      display: flex;
      align-items: center;
      gap: .85rem;
      padding: .85rem 1.25rem;
      background: var(--panel-bg);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      box-shadow: var(--shadow-lg);
      min-width: 240px;
      max-width: 320px;
      animation: toast-in .35s cubic-bezier(.175, .885, .32, 1.275);
      transition: opacity .3s, transform .3s;
    }

    .toast.hide {
      opacity: 0;
      transform: translateX(30px);
    }

    @keyframes toast-in {
      from {
        opacity: 0;
        transform: translateX(30px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .toast-icon {
      font-size: 1.8rem;
      flex-shrink: 0;
    }

    .toast-body h4 {
      font-size: .9rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: .15rem;
    }

    .toast-body p {
      font-size: .78rem;
      color: var(--clr-muted);
    }

    /* ============================================================
       KONFETTI & SCROLL-HIGHLIGHT
    ============================================================ */
    #confetti-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    }

    .scroll-highlight {
      animation: highlight-pulse 1.5s ease;
    }

    @keyframes highlight-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .5);
      }

      50% {
        box-shadow: 0 0 0 12px rgba(52, 211, 153, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
      }
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width:768px) {
      .task-wrapper {
        padding: 1.25rem;
      }

      .dnd-drop-zones {
        grid-template-columns: 1fr;
      }

      .tf-grid {
        grid-template-columns: 1fr;
      }

      .sc-step {
        flex-direction: column;
        align-items: flex-start;
      }

      .sc-step select {
        width: 100%;
      }

      .flow-step select {
        width: 100%;
      }
    }

    @media (max-width:640px) {
      .eva-diagram {
        flex-direction: column;
        gap: .5rem;
      }

      .eva-arrow {
        transform: rotate(90deg);
      }

      .eva-box {
        max-width: 100%;
      }

      .task-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .task-points {
        margin-left: 0;
      }

      .tap-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .image-match-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  
        /* Kontrast-Korrekturen (WCAG AA, 2026-10-07): gleiche Farbtöne, nur dunkler bzw. heller */
        html:not([data-theme="light"]) .ex-cell.e-cell { color: #b29afb; }  /* statt #a78bfa */
        html[data-theme="light"] .eva-a { color: #047854; }  /* statt #059669 */
        html[data-theme="light"] .eva-v { color: #0270a9; }  /* statt #0284c7 */
        html[data-theme="light"] .ex-cell.a-cell { color: #047d58; }  /* statt #059669 */
        html[data-theme="light"] .ex-cell.v-cell { color: #0273ae; }  /* statt #0284c7 */