/* ============ Design-Tokens ============ */
:root {
  --bg: #f6f3fb;
  --surface: #ffffff;
  --surface-2: #f1ebf9;
  --surface-3: #e8def5;
  --text: #1d1230;
  --muted: #6b5f80;
  --border: #e3d9f0;
  --primary: #7b2cbf;
  --primary-strong: #5b1a96;
  --primary-soft: #efe3fb;
  --on-primary: #ffffff;
  --accent: #a570ea;
  --accent-strong: #8b55d6;
  --on-accent: #1d0b35;
  /* Warme Farbe für die B-Karten bei „Paare zuordnen“ */
  --card-warm: #f4c43c;
  --card-warm-strong: #e8963a;
  --ink: #1f0a3f;
  --ok: #17915f;
  --ok-soft: #dcf5e9;
  --bad: #d23f4f;
  --bad-soft: #fde3e6;
  --warn-soft: #fff4d6;
  --shadow-sm: 0 1px 2px rgba(31, 10, 63, .06), 0 1px 3px rgba(31, 10, 63, .08);
  --shadow: 0 4px 14px rgba(31, 10, 63, .08), 0 1px 3px rgba(31, 10, 63, .06);
  --shadow-lg: 0 18px 40px rgba(31, 10, 63, .18);
  --radius: 18px;
  --radius-sm: 12px;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #130a22;
    --surface: #1e1232;
    --surface-2: #2a1a44;
    --surface-3: #352353;
    --text: #f3ecff;
    --muted: #b4a6cc;
    --border: #3b2a58;
    --primary: #b06cf0;
    --primary-strong: #c88cff;
    --primary-soft: #33204f;
    --on-primary: #160828;
    --ok: #3ccf8e;
    --ok-soft: #123a2a;
    --bad: #ff6b7a;
    --bad-soft: #43161e;
    --warn-soft: #3a2d0c;
    --zone-mix: 24%;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; }
a { color: var(--primary); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* ============ Layout ============ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand span { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; }
.brand span b { color: var(--primary); font-weight: 600; }
.topnav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.topnav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.topnav a:hover { background: var(--surface-2); }
.topnav a.active { background: var(--primary-soft); color: var(--primary); }
.topsearch { position: relative; flex: 0 1 260px; }
.topsearch input[type=search] { padding-left: 38px; border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.topsearch .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }

main { max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 30px 20px; }

@media (max-width: 760px) {
  .topnav a span { display: none; }
  .topsearch { display: none; }
  main { padding: 18px 16px 60px; }
}

/* ============ Buttons & Formulare ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; text-decoration: none;
  background: var(--surface-2); color: var(--text);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn.primary:hover { background: var(--primary-strong); }
.btn.accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.accent:hover { background: var(--accent-strong); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.btn.small { padding: 6px 12px; font-size: .85rem; }
.btn.big { padding: 15px 28px; font-size: 1.08rem; }
.btn.icon-only { padding: 9px; border-radius: 12px; }

input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus, .btn:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
textarea { min-height: 90px; resize: vertical; }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px; }
label.field small { display: block; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; }

/* ============ Startseite ============ */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 400px at 85% -10%, #6b1fae 0%, transparent 60%),
              linear-gradient(135deg, #1f0a3f 0%, #3b1170 100%);
  color: #fff; border-radius: 28px; padding: 48px clamp(22px, 5vw, 56px);
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
  box-shadow: var(--shadow-lg);
}
.hero::after {
  content: ''; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px;
  background:
    linear-gradient(#a52fa8, #a52fa8) 0 0 / 46px 46px no-repeat,
    linear-gradient(#7b2cbf, #7b2cbf) 70px 50px / 56px 56px no-repeat,
    linear-gradient(#5a22a0, #5a22a0) 20px 120px / 40px 40px no-repeat;
  opacity: .5; border-radius: 6px;
}
.hero img { width: clamp(96px, 14vw, 150px); border-radius: 32px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0; letter-spacing: .01em; }
.hero h1 b { color: var(--accent); font-weight: 600; }
.hero p { margin: 8px 0 24px; font-size: 1.12rem; opacity: .85; max-width: 520px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; text-align: center; } .hero .cta { justify-content: center; } .hero img { margin: 0 auto; } }

.code-box { display: flex; gap: 8px; max-width: 360px; position: relative; z-index: 1; }
.code-box input { background: rgba(255, 255, 255, .95); color: #1d1230; text-transform: lowercase; letter-spacing: .15em; font-weight: 800; border: none; }

.section-title { display: flex; align-items: center; gap: 10px; margin: 40px 0 16px; }
.section-title h2 { margin: 0; }
.section-title a { margin-left: auto; font-weight: 700; text-decoration: none; }

/* ============ Kacheln ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.tile {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  cursor: pointer;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.tile .thumb {
  aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative;
  background: linear-gradient(135deg, var(--c1, #7b2cbf), var(--c2, #a52fa8)); color: #fff;
}
.tile .thumb > .icon { width: 44px; height: 44px; stroke-width: 1.7; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }
.tile .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .thumb .badge { position: absolute; left: 10px; top: 10px; z-index: 1; }
.tile .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile .title { font-weight: 800; line-height: 1.25; }
.tile .meta { font-size: .8rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tile.dragging-over, .folder-tile.dragging-over { outline: 3px dashed var(--primary); outline-offset: 2px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #2a1748;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .78rem;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.chip.active { background: var(--primary); color: var(--on-primary); }
.chip button { all: unset; cursor: pointer; opacity: .7; margin-left: 2px; }
.chip button:hover { opacity: 1; }

/* gleiche Spaltenbreite wie die App-Kacheln (.grid), Namen dürfen umbrechen */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-bottom: 26px; }
.folder-tile > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.folder-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; font-weight: 800; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.folder-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.folder-tile .ficon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.folder-tile .ficon .icon { width: 24px; height: 24px; }
.folder-tile .count { display: block; color: var(--muted); font-weight: 600; font-size: .8rem; }
.folder-tile.new { border-style: dashed; color: var(--muted); box-shadow: none; background: transparent; }
.folder-tile.new .ficon { background: var(--surface-2); color: var(--muted); }

.empty { text-align: center; padding: 50px 20px; color: var(--muted); border: 2px dashed var(--border); border-radius: var(--radius); }
.empty > .icon { width: 42px; height: 42px; margin-bottom: 8px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--muted); opacity: .5; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.toolbar .grow { flex: 1; }

/* ============ App erstellen ============ */
.type-cat { margin: 30px 0 12px; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.type-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; text-align: left; font: inherit;
}
.type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.type-card .ticon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.type-card .ticon .icon { width: 26px; height: 26px; }
.type-card strong { display: block; font-size: 1.02rem; }
.type-card small { color: var(--muted); font-size: .86rem; line-height: 1.35; display: block; margin-top: 2px; }
.type-card .new-badge { font-size: .65rem; background: var(--accent); color: var(--on-accent); padding: 1px 7px; border-radius: 99px; margin-left: 6px; vertical-align: 2px; }

/* ============ Editor ============ */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.editor aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 960px) { .editor { grid-template-columns: 1fr; } .editor aside { position: static; } }
.editor .card + .card { margin-top: 18px; }
.editor .card .media-field { max-width: 520px; }
.rows { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start;
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px;
}
.row .num { font-weight: 800; color: var(--muted); padding-top: 9px; text-align: center; }
.row .fields { display: grid; gap: 8px; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.row .fields .full { grid-column: 1 / -1; }
.row .row-actions { display: flex; flex-direction: column; gap: 4px; }
.row-actions .btn { padding: 6px; border-radius: 9px; background: transparent; }
.row-actions .btn:hover { background: var(--surface-3); }
@media (max-width: 640px) { .row .fields { grid-template-columns: 1fr; } }
.sub-rows { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.sub-row { display: flex; gap: 8px; align-items: center; }
.sub-row input[type=text] { flex: 1; }

.media-field { display: flex; gap: 8px; align-items: center; }
.media-field .preview { width: 42px; height: 42px; border-radius: 10px; background: var(--surface) center / cover no-repeat; border: 1px solid var(--border); flex-shrink: 0; }
.media-field input { flex: 1; }
.hint { background: var(--primary-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem; margin-bottom: 14px; }
.hint code { background: var(--surface); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.warn { background: var(--warn-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem; }

.cover-preview {
  aspect-ratio: 1.91 / 1; max-width: 520px; border-radius: 14px; cursor: pointer; position: relative;
  background: linear-gradient(135deg, #3b1170, #7b2cbf) center / cover no-repeat;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; overflow: hidden;
}
.cover-preview.auto { outline: 2px dashed var(--border); outline-offset: -2px; }
.cover-preview span { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.cover-preview:not([style*="url"])::before { content: ''; position: absolute; inset: 0; background: url(/img/logo.png) center / 34% no-repeat; opacity: .9; }
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.tag-input input { border: none; padding: 4px 6px; flex: 1; min-width: 100px; box-shadow: none !important; }

/* ============ Detailseite ============ */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
@media (max-width: 960px) { .detail { grid-template-columns: 1fr; } }
.side-actions { display: flex; flex-direction: column; gap: 8px; }
.side-actions .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.share-box { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.share-box img { width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 6px; }
.share-box .code { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .18em; font-weight: 600; color: var(--primary); }
.share-link { display: flex; gap: 6px; width: 100%; }
.share-link input { font-size: .82rem; }

/* ============ Modal & Toast ============ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(19, 8, 36, .55); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 200; padding: 16px; animation: fade .15s ease;
}
.modal { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 24px; animation: pop .18s ease; }
.modal.wide { width: min(1000px, 100%); }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.modal-head h2 { margin: 0; flex: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }

#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast { background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); font-weight: 700; animation: pop .2s ease; }
.toast.error { background: var(--bad); }

/* ============ Player (gemeinsam) ============ */
.play-page { max-width: 1100px; margin: 0 auto; padding: 18px 16px 50px; }
.play-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.play-head img { width: 34px; height: 34px; border-radius: 9px; }
.play-head h1 { margin: 0; font-size: 1.5rem; }
/* Vollbild-Spielansicht für S*S: ganzes Fenster, Aufgabe unten */
.play-page.full { max-width: none; padding: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.play-page.full .play-head { padding: 8px 16px; margin: 0; }
.play-page.full .play-head h1 { font-size: 1.15rem; }
.play-page.full .play-head img { width: 28px; height: 28px; }
.play-box { flex: 1; min-height: 0; display: flex; }
.player-shell.full { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 0; border: 0; border-top: 1px solid var(--border); box-shadow: none; }
.player-shell.full .player { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 12px; }
.player-shell.full .player-task { border-top: 1px solid var(--border); font-size: 1rem; padding: 10px 18px; max-height: 30vh; overflow: auto; }
.player-shell.full .gz-board { flex: 1; min-height: calc(var(--n) * 120px); }
.player-shell.full .gz-board.grid { min-height: 360px; }
.player-shell.full .pc-board { flex: 1 0 auto; }
.play-cover { height: clamp(110px, 20vw, 190px); border-radius: 24px; margin-bottom: 14px; background: center / cover no-repeat; box-shadow: var(--shadow); }
.player-shell { background: var(--surface); border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.player-task { padding: 16px 22px; background: var(--primary-soft); font-weight: 700; font-size: 1.05rem; white-space: pre-line; }
.player { padding: 22px; position: relative; min-height: 320px; }
.player-bar { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.player-bar .status { margin-right: auto; font-weight: 800; color: var(--muted); }

.token {
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px;
  font-weight: 700; box-shadow: var(--shadow-sm); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; touch-action: none;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 48px;
  transition: border-color .15s, background .15s, transform .12s;
}
.token:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.token.selected { border-color: var(--primary); background: var(--primary-soft); transform: scale(1.03); }
.token.correct { border-color: var(--ok); background: var(--ok-soft); cursor: default; }
.token.wrong { border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
.token img { max-height: 110px; border-radius: 8px; pointer-events: none; }
.token * { -webkit-user-drag: none; }
.video-thumb { all: unset; position: relative; display: block; cursor: pointer; border-radius: 8px; overflow: hidden; line-height: 0; }
.video-thumb img { width: 160px; max-height: none; }
.video-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .25); color: #fff; }
.video-thumb .play .icon { width: 34px; height: 34px; fill: #fff; }
.video-thumb:hover .play { background: rgba(0, 0, 0, .4); }
.token.drag-src { opacity: .35; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: rotate(-2deg) scale(1.05); box-shadow: var(--shadow-lg); opacity: .95; }
.drop-hover { outline: 3px solid var(--primary) !important; outline-offset: 2px; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 60px; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.pool:empty::after { content: 'Alles verteilt ✔'; color: var(--muted); font-weight: 700; align-self: center; }

.feedback-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 20;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(2px); animation: fade .25s;
}
.feedback-card { text-align: center; max-width: 440px; padding: 28px; }
.feedback-card .big { font-size: 3.4rem; line-height: 1; }
.feedback-card h2 { margin: 10px 0 6px; font-size: 1.8rem; }
.feedback-card p { white-space: pre-line; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; }

.progress { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--primary), #a52fa8); border-radius: 99px; transition: width .3s; }

/* Paare */
.pairs-board { display: grid; gap: 10px; }
.pair-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: stretch; }
.pair-row .prompt { background: var(--primary-soft); border-radius: 14px; padding: 10px 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; flex-direction: column; min-height: 52px; }
.pair-row .prompt img { max-height: 110px; border-radius: 8px; }
.pair-row .link { display: grid; place-items: center; color: var(--muted); }
.slot { border: 2px dashed var(--border); border-radius: 14px; min-height: 52px; display: flex; align-items: stretch; justify-content: stretch; padding: 3px; transition: background .15s; }
.slot > .token { flex: 1; }
.slot.empty-slot:hover { background: var(--surface-2); }

/* Gruppen */
.groups-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.group-zone { border: 2px dashed var(--border); border-radius: 18px; padding: 10px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.group-zone h3 { text-align: center; margin: 4px 0 6px; padding: 8px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }

/* Zeitstrahl mit Achse */
.tl-board { position: relative; background: var(--surface-2); border-radius: 16px; padding: 10px 0 6px; }
.tl-axis { position: relative; height: 74px; cursor: pointer; }
.tl-line { position: absolute; left: 3%; right: 3%; top: 30px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.tl-tick { position: absolute; top: 26px; width: 2px; height: 16px; background: var(--muted); transform: translateX(-1px); }
.tl-tick span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%) rotate(-30deg); transform-origin: center; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tl-pin { position: absolute; top: 8px; width: 14px; height: 20px; transform: translateX(-50%); background: var(--card-warm-strong); clip-path: path('M7 20 C7 20 0 11 0 7 A7 7 0 0 1 14 7 C14 11 7 20 7 20 Z'); }
.tl-pin.full { background: var(--accent); }
.tl-pin.hover { background: var(--ok); transform: translateX(-50%) scale(1.4); transform-origin: bottom; }
.tl-preview { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ok); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .85rem; padding: 2px 10px; border-radius: 99px; white-space: nowrap; z-index: 3; pointer-events: none; }
.tl-axis { margin-top: 14px; }
.tl-lanes { position: relative; min-height: 90px; }
.tl-link { position: absolute; top: 0; width: 2px; background: repeating-linear-gradient(var(--muted) 0 4px, transparent 4px 7px); transform: translateX(-1px); }
.tl-card { width: 150px; min-height: 58px; padding: 8px 10px; font-size: .88rem; flex-direction: column; gap: 4px; }
.tl-lanes .tl-card { position: absolute; }
.tl-year { font-family: var(--font-display); font-size: .82rem; background: var(--accent); color: var(--on-accent); padding: 0 8px; border-radius: 99px; }
.tl-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 16px 0; min-height: 80px; }

/* Bild beschriften: Bild volle Breite, Auswahl darunter */
.il-wrap { display: flex; flex-direction: column; gap: 14px; }
/* Markierungen am Bildrand dürfen über das Bild hinausragen (nicht abschneiden) */
.il-wrap .il-image { position: relative; width: calc(100% - 36px); margin: 18px auto 4px; overflow: visible; }
.il-wrap .il-image img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; }
.il-pin {
  all: unset; box-sizing: border-box; position: absolute; transform: translate(-50%, -50%); cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 3px 8px rgba(0, 0, 0, .35); transition: transform .15s, background .15s;
}
.il-pin:hover { transform: translate(-50%, -50%) scale(1.12); }
.il-pin.filled { background: var(--accent); }
.il-pin.active { background: var(--card-warm-strong); transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 4px #fff, 0 0 0 8px color-mix(in srgb, var(--card-warm-strong) 45%, transparent); z-index: 2; }
.il-pin.correct { background: var(--ok); cursor: default; }
.il-pin.wrong { background: var(--bad); animation: shake .35s; }
.il-panel { background: var(--surface-2); border-radius: 16px; padding: 14px; }
.il-help { margin: 4px; color: var(--muted); font-weight: 700; text-align: center; }
.il-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.il-panel-head .btn { margin-left: auto; }
.il-num { width: 30px; height: 30px; border-radius: 50%; background: var(--card-warm-strong); color: #fff; display: inline-grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.il-num.small { width: 22px; height: 22px; font-size: .75rem; background: var(--accent); margin-right: 8px; }
.il-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.il-option {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 14px; border-radius: 12px; background: var(--surface);
  border: 2px solid var(--border); font-weight: 600; line-height: 1.35; display: flex; align-items: center; transition: border-color .15s, background .15s;
}
.il-option:hover:not(:disabled) { border-color: var(--primary); }
.il-option.chosen { border-color: var(--card-warm-strong); background: color-mix(in srgb, var(--card-warm) 18%, var(--surface)); }
.il-option.used { opacity: .55; }
.il-option:disabled { opacity: .35; cursor: default; }

/* Gruppen einteilen */
.cg { display: flex; flex-direction: column; gap: 14px; }
.cg-class { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.cg-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--border); }
.cg-tab { all: unset; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 12px 12px 0 0; font-weight: 800; color: var(--muted); margin-bottom: -2px; border-bottom: 2px solid transparent; }
.cg-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-soft); }
.cg-panel { display: flex; flex-direction: column; gap: 16px; }
.cg-controls { display: flex; gap: 24px; flex-wrap: wrap; }
.cg-controls small { display: block; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.cg-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-controls .cg-btns .btn { min-width: 56px; }
.cg-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cg-group { background: var(--surface-2); border-radius: 16px; padding: 12px 16px; border: 2px solid transparent; }
.cg-group.active { border-color: var(--primary); background: var(--primary-soft); }
.cg-group h3 { margin: 0 0 6px; color: var(--primary); }
.cg-group ul { margin: 0; padding-left: 18px; }
.cg-stage { background: var(--primary-soft); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.cg-big { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 6rem); font-weight: 600; line-height: 1.1; color: var(--primary); }
.cg-big.small { font-size: clamp(1.8rem, 5vw, 3.2rem); }
.cg-big.pop { animation: gz-in .3s ease; }
@media print {
  body * { visibility: hidden; }
  .cg-groups, .cg-groups * { visibility: visible; }
  .cg-groups { position: absolute; left: 0; top: 0; width: 100%; }
}

/* Paare zuordnen: Karten frei verteilt, mit Klebestreifen verbunden */
.pc-board {
  position: relative; min-height: 420px; border-radius: 18px; overflow: hidden; touch-action: none;
  background: var(--surface-2);
}
.pc-card {
  position: absolute; width: var(--card-w, 200px); padding: 18px 14px 14px; border-radius: 16px;
  text-align: center; font-weight: 700; line-height: 1.35; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.pc-card * { -webkit-user-drag: none; }
.pc-card img { max-width: 100%; max-height: 120px; border-radius: 10px; pointer-events: none; }
.pc-card.side-a { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.pc-card.side-b { background: color-mix(in srgb, var(--card-warm) 22%, var(--surface)); border: 2px solid color-mix(in srgb, var(--card-warm-strong) 40%, transparent); }
.pc-pin { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset -2px -2px 3px rgba(0, 0, 0, .2); }
.side-a .pc-pin { background: var(--primary); }
.side-b .pc-pin { background: var(--card-warm-strong); }
.pc-card.dragging, .pc-stack.dragging { cursor: grabbing; box-shadow: var(--shadow-lg); transform: rotate(-1.5deg) scale(1.03); }
.pc-card.selected { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Ziel beim Ziehen: hier kann man loslassen */
.pc-card.snap-target { outline: 3px dashed var(--ok); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 20%, transparent), var(--shadow); }
.pc-stack { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; transition: transform .15s; }
.pc-stack .pc-card { position: relative; box-shadow: var(--shadow-sm); }
.pc-stack .pc-card + .pc-tape + .pc-card .pc-pin { display: none; }
/* Klebestreifen: wie Kreppband, gut sichtbar auf hellen und dunklen Karten */
.pc-tape {
  all: unset; position: relative; z-index: 3; width: 96px; height: 28px; margin: -14px 0; cursor: pointer;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 9px),
    linear-gradient(#efe1b8, #e2cf98);
  border-left: 2px dashed rgba(120, 95, 40, .35); border-right: 2px dashed rgba(120, 95, 40, .35);
  box-shadow: 0 2px 5px rgba(60, 40, 10, .35); transform: rotate(-3deg); opacity: .95;
}
.pc-tape:hover { filter: brightness(1.06); }
.pc-tape:hover::after { content: '✂'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.pc-stack.correct .pc-card { border-color: var(--ok); }
.pc-stack.correct .pc-tape { background: linear-gradient(#9fe0bf, #6fcf9f); border-color: rgba(23, 145, 95, .5); cursor: default; }
.pc-stack.correct .pc-tape:hover::after { content: '✓'; color: var(--ok); }
.pc-stack.correct { cursor: default; }
.pc-stack.wrong { animation: shake .35s; }
.pc-stack.wrong .pc-card { border-color: var(--bad); }

/* Gruppenzuordnung: Flächen über die ganze Spielfläche, Karte in der Mitte */
.gz-board { position: relative; display: grid; grid-template-rows: repeat(var(--n), minmax(150px, 1fr)); min-height: max(62vh, calc(var(--n) * 160px)); border-radius: 18px; overflow: hidden; }
.gz-board.grid { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, 1fr); }
@media (max-width: 640px) { .gz-board.grid { grid-template-columns: 1fr; } }
.gz-zone { background: color-mix(in srgb, var(--zc) var(--zone-mix, 16%), var(--surface)); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; transition: filter .15s; }
.gz-zone.drop-hover { outline: none !important; filter: brightness(1.06) saturate(1.2); box-shadow: inset 0 0 0 4px var(--primary); }
.gz-head { text-align: center; }
.gz-head h3 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600; margin: 0; color: color-mix(in srgb, var(--zc) 75%, var(--text)); }
/* Trennlinie zwischen den Flächen in der Gruppenfarbe */
.gz-zone + .gz-zone { border-top: 2px solid color-mix(in srgb, var(--zc) 30%, transparent); }
.gz-head p { margin: 2px 0 0; color: var(--muted); }
.gz-head img { max-height: 70px; border-radius: 10px; display: block; margin: 0 auto 6px; }
/* Abgelegte Karten: gleich gross im Raster */
/* Eine Kartengrösse für alles: Karte in der Mitte und abgelegte Karten sehen gleich aus */
.gz-board { --gz-card-w: min(200px, 42vw); --gz-card-h: 84px; }
.gz-card {
  width: var(--gz-card-w); height: var(--gz-card-h); min-height: 0; padding: 8px 14px;
  font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: center;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* lange Texte nach drei Zeilen kürzen (voller Text im Tooltip) */
.gz-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gz-card img { max-height: calc(var(--gz-card-h) - 16px); }
.gz-items { display: grid; grid-template-columns: repeat(auto-fill, var(--gz-card-w)); grid-auto-rows: var(--gz-card-h); gap: 10px; align-content: start; justify-content: center; flex: 1; }
.gz-items .gz-card { border-color: color-mix(in srgb, var(--zc) 40%, var(--border)); }
.gz-items .token img { max-height: 60px; }
.gz-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.gz-board.even .gz-stage { transform: translate(-50%, calc(-100% - 14px)); }
.gz-board.grid.even .gz-stage { transform: translate(-50%, -50%); }
.gz-stage .token { pointer-events: auto; box-shadow: var(--shadow-lg); animation: gz-in .25s ease; }
@keyframes gz-in { from { transform: translateY(10px) scale(.96); } }
.gz-stage .token img { max-height: 160px; }
.gz-left { font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--surface); padding: 2px 10px; border-radius: 99px; box-shadow: var(--shadow-sm); }
.drag-src { pointer-events: none; }

/* Reihenfolge / Zeitstrahl */
.order-list { display: flex; flex-direction: column; gap: 8px; max-width: 680px; margin: 0 auto; }
.order-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
.order-item .pos { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 800; }
.order-item .token { justify-content: flex-start; text-align: left; }
.order-item .arrows { display: flex; flex-direction: column; gap: 2px; }
.order-item .arrows button { all: unset; cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--muted); }
.order-item .arrows button:hover { background: var(--surface-2); color: var(--text); }
.timeline { position: relative; max-width: 720px; margin: 0 auto; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: linear-gradient(var(--primary), #a52fa8); }
.timeline .order-item { grid-template-columns: 1fr auto; position: relative; }
.timeline .order-item::before { content: ''; position: absolute; left: -29px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 4px solid var(--primary); }
.year-badge { font-family: var(--font-display); font-weight: 600; background: var(--accent); color: var(--on-accent); padding: 2px 10px; border-radius: 99px; font-size: .9rem; }

/* Quiz */
.quiz-q { font-size: 1.25rem; font-weight: 800; margin-bottom: 16px; text-align: center; }
.quiz-img { display: block; max-height: 260px; margin: 0 auto 16px; border-radius: 14px; }
.quiz-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.answer-btn {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--border);
  background: var(--surface); font-weight: 700; display: flex; gap: 12px; align-items: center; transition: all .15s;
}
.answer-btn:hover { border-color: var(--primary); }
.answer-btn .letter { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.answer-btn.chosen { border-color: var(--primary); background: var(--primary-soft); }
.answer-btn.chosen .letter { background: var(--primary); color: var(--on-primary); }
.answer-btn.correct { border-color: var(--ok); background: var(--ok-soft); }
.answer-btn.wrong { border-color: var(--bad); background: var(--bad-soft); }
.answer-btn img { max-height: 90px; border-radius: 8px; }

/* Lückentext */
.cloze-text { font-size: 1.12rem; line-height: 2.4; white-space: pre-wrap; }
.cloze-text input, .cloze-text select { width: auto; display: inline-block; padding: 4px 8px; font-weight: 700; border-radius: 10px; min-width: 90px; }
.cloze-text input.correct, .cloze-text select.correct, .gap.correct { border-color: var(--ok); background: var(--ok-soft); }
.cloze-text input.wrong, .cloze-text select.wrong, .gap.wrong { border-color: var(--bad); background: var(--bad-soft); }
.gap { display: inline-flex; vertical-align: middle; min-width: 100px; min-height: 40px; border: 2px dashed var(--border); border-radius: 12px; padding: 2px; margin: 0 2px; }
.gap > .token { min-height: 32px; padding: 3px 10px; flex: 1; }

/* Memory */
.memory-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.mem-card { aspect-ratio: 1; perspective: 800px; cursor: pointer; }
.mem-card .inner { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mem-card.flipped .inner, .mem-card.done .inner { transform: rotateY(180deg); }
.mem-card .face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; display: grid; place-items: center; padding: 10px; text-align: center; font-weight: 800; overflow: hidden; }
.mem-card .back { background: linear-gradient(135deg, #3b1170, #7b2cbf); box-shadow: var(--shadow); }
.mem-card .back img { width: 46%; opacity: .9; border-radius: 12px; }
.mem-card .front { background: var(--surface); border: 2px solid var(--border); transform: rotateY(180deg); }
.mem-card .front img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.mem-card.done .front { border-color: var(--ok); background: var(--ok-soft); }

/* Kreuzworträtsel */
.cw-wrap { display: grid; grid-template-columns: auto minmax(220px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 800px) { .cw-wrap { grid-template-columns: 1fr; } }
.cw-grid { display: grid; gap: 2px; overflow-x: auto; justify-content: start; }
.cw-cell { width: var(--cell, 36px); height: var(--cell, 36px); position: relative; }
.cw-cell.block { visibility: hidden; }
.cw-cell input { width: 100%; height: 100%; padding: 0; text-align: center; text-transform: uppercase; font-weight: 800; font-size: 1.05rem; border-radius: 6px; border-width: 2px; }
.cw-cell input.correct { background: var(--ok-soft); border-color: var(--ok); }
.cw-cell input.wrong { background: var(--bad-soft); border-color: var(--bad); }
.cw-cell input.hl { background: var(--primary-soft); }
.cw-cell .n { position: absolute; top: 1px; left: 3px; font-size: .6rem; font-weight: 800; color: var(--muted); pointer-events: none; z-index: 1; }
.cw-clues h3 { margin-top: 0; }
.cw-clues ol { padding-left: 0; list-style: none; margin: 0 0 16px; }
.cw-clues li { padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.cw-clues li:hover, .cw-clues li.active { background: var(--primary-soft); }
.cw-clues li b { color: var(--primary); margin-right: 6px; }

/* Wörtersuche */
.ws-wrap { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 800px) { .ws-wrap { grid-template-columns: 1fr; } }
.ws-grid { display: grid; gap: 3px; user-select: none; touch-action: none; justify-content: start; }
.ws-cell { width: var(--cell, 34px); height: var(--cell, 34px); display: grid; place-items: center; font-weight: 800; border-radius: 8px; background: var(--surface-2); text-transform: uppercase; cursor: pointer; font-size: 1.02rem; }
.ws-cell.sel { background: var(--primary); color: var(--on-primary); }
.ws-cell.found { background: var(--ok-soft); color: var(--ok); }
.ws-words { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-words span { padding: 5px 12px; border-radius: 99px; background: var(--surface-2); font-weight: 700; }
.ws-words span.found { background: var(--ok-soft); color: var(--ok); text-decoration: line-through; }

/* Buchstabenraten */
.hm-word { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0; }
.hm-letter { width: 42px; height: 52px; border-bottom: 4px solid var(--primary); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; text-transform: uppercase; }
.hm-letter.space { border: none; width: 20px; }
.hm-letter.missed { color: var(--bad); }
.hm-keys { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 640px; margin: 0 auto; }
.hm-keys button { all: unset; width: 42px; height: 46px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-weight: 800; cursor: pointer; text-transform: uppercase; transition: background .12s; }
.hm-keys button:hover:not(:disabled) { background: var(--primary-soft); }
.hm-keys button.hit { background: var(--ok-soft); color: var(--ok); }
.hm-keys button.miss { background: var(--bad-soft); color: var(--bad); }
.hm-lives { display: flex; gap: 6px; justify-content: center; font-size: 1.5rem; }
.hm-lives span.lost { filter: grayscale(1); opacity: .25; }

/* Karteikarten */
.fc-stage { max-width: 560px; margin: 0 auto; }
.fc-card { aspect-ratio: 3 / 2; perspective: 1200px; cursor: pointer; margin: 16px 0; }
.fc-card .inner { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.fc-card.flipped .inner { transform: rotateY(180deg); }
.fc-card .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 1.35rem; font-weight: 800; box-shadow: var(--shadow); white-space: pre-line; }
.fc-card .face img { max-height: 55%; border-radius: 12px; }
.fc-card .front { background: var(--surface); border: 2px solid var(--border); }
.fc-card .back { background: linear-gradient(135deg, #3b1170, #7b2cbf); color: #fff; transform: rotateY(180deg); }
.fc-actions { display: flex; gap: 10px; justify-content: center; }

/* Richtig/Falsch */
.tf-card { max-width: 620px; margin: 10px auto; text-align: center; background: var(--surface-2); border-radius: 22px; padding: 34px 24px; font-size: 1.3rem; font-weight: 800; min-height: 150px; display: grid; place-items: center; }
.tf-card img { max-height: 200px; border-radius: 12px; margin-bottom: 10px; }
.tf-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.tf-buttons .btn { min-width: 160px; font-size: 1.1rem; padding: 16px 24px; }
.tf-buttons .yes { background: var(--ok); color: #fff; }
.tf-buttons .no { background: var(--bad); color: #fff; }
.tf-explain { text-align: center; margin-top: 12px; font-weight: 700; min-height: 1.5em; }

/* Schätzen */
.est-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.est-value { font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: var(--primary); }
.est-wrap input[type=range] { width: 100%; accent-color: var(--primary); height: 30px; }
.est-scale { display: flex; justify-content: space-between; color: var(--muted); font-weight: 700; font-size: .9rem; }
.est-result { margin-top: 14px; font-weight: 800; font-size: 1.1rem; }

/* Bild beschriften */
.il-board { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; }
@media (max-width: 760px) { .il-board { grid-template-columns: 1fr; } }
.il-image { position: relative; border-radius: 14px; overflow: hidden; user-select: none; }
.il-image img { display: block; width: 100%; }
.il-marker {
  position: absolute; transform: translate(-50%, -50%); min-width: 34px; min-height: 34px; border-radius: 99px;
  background: var(--primary); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), var(--shadow); padding: 2px; font-size: .9rem;
}
.il-marker > .token { min-height: 28px; padding: 3px 10px; font-size: .88rem; color: var(--text); }
.il-marker.correct { background: var(--ok); }
.il-marker.wrong { background: var(--bad); }
.il-pool { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface-2); min-height: 80px; }
.il-editor { position: relative; cursor: crosshair; border-radius: 14px; overflow: hidden; }
.il-editor img { display: block; width: 100%; }

/* Kollektion */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.coll-grid .tile.solved::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-weight: 800; }

/* SCORM */
.scorm-frame { width: 100%; height: min(78vh, 900px); border: 0; display: block; background: #fff; }