/* Benno Vorbergs Sprachwelten – Rätsel-Engine 0.7.0 */
:root {
  --pe-bg: #fffaf0;
  --pe-panel: #fff;
  --pe-text: #2e2b27;
  --pe-muted: #675f55;
  --pe-border: rgba(88, 65, 33, .20);
  --pe-accent: #8f641c;
  --pe-accent-contrast: #fff;
  --pe-selected: #fff1bf;
  --pe-success: #1f6f43;
  --pe-error: #9a3f35;
  --pe-shadow: 0 22px 70px rgba(28, 21, 14, .28);
  --pe-radius: 22px;
}

.pe-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 17, 13, .64);
  backdrop-filter: blur(4px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pe-text);
}

.pe-dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  background: var(--pe-panel);
  box-shadow: var(--pe-shadow);
}

.pe-header { padding: 26px 64px 12px 28px; }
.pe-kicker { margin-bottom: 6px; color: var(--pe-accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pe-title { margin: 0 0 9px; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.12; }
.pe-question { margin: 0 0 6px; font-size: clamp(1rem, 2vw, 1.18rem); font-weight: 700; line-height: 1.45; }
.pe-instruction { margin: 0; color: var(--pe-muted); line-height: 1.5; }

.pe-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--pe-border);
  border-radius: 50%;
  background: #fff;
  color: var(--pe-text);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.pe-body { padding: 10px 28px 18px; }
.pe-footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 28px 26px; }
.pe-feedback { min-height: 1.5em; margin: 0 28px; padding: 0; font-weight: 700; line-height: 1.45; }
.pe-feedback-success { color: var(--pe-success); }
.pe-feedback-error { color: var(--pe-error); }
.pe-feedback-hint { color: var(--pe-accent); }

.pe-button,
.pe-choice,
.pe-sort-item,
.pe-match-item,
.pe-token {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pe-button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--pe-border);
  border-radius: 999px;
  font-weight: 800;
}
.pe-button-primary { border-color: var(--pe-accent); background: var(--pe-accent); color: var(--pe-accent-contrast); }
.pe-button-ghost { background: #fff; color: var(--pe-text); }

.pe-choices { display: grid; gap: 10px; }
.pe-choice {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--pe-border);
  border-radius: 14px;
  background: var(--pe-bg);
  color: var(--pe-text);
  text-align: left;
  font-weight: 700;
}
.pe-choice.pe-selected { border-color: var(--pe-accent); background: var(--pe-selected); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pe-accent) 22%, transparent); }

.pe-sort-list { display: grid; gap: 10px; }
.pe-sort-item {
  touch-action: none;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--pe-border);
  border-radius: 14px;
  background: var(--pe-bg);
  color: var(--pe-text);
  text-align: left;
  font-weight: 750;
}
.pe-sort-item::before { content: "↕"; display: inline-block; width: 1.6rem; margin-right: 12px; color: var(--pe-accent); font-size: 1.55rem; font-weight: 900; line-height: 1; text-align: center; vertical-align: -.12em; }

.pe-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pe-match-column { display: grid; align-content: start; gap: 10px; }
.pe-match-item {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--pe-border);
  border-radius: 14px;
  background: var(--pe-bg);
  color: var(--pe-text);
  font-weight: 700;
}
.pe-match-item.pe-active { border-color: var(--pe-accent); background: var(--pe-selected); }
.pe-match-item.pe-matched { opacity: .58; border-color: var(--pe-success); background: #eef8f1; }

.pe-input-form { display: flex; gap: 10px; }
.pe-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--pe-border);
  border-radius: 14px;
  background: #fff;
  color: var(--pe-text);
  font: inherit;
  font-size: 1.05rem;
}
.pe-input:focus { outline: 3px solid color-mix(in srgb, var(--pe-accent) 22%, transparent); border-color: var(--pe-accent); }

.pe-reorder-stack { display: grid; gap: 18px; }
.pe-reorder-row { display: grid; gap: 7px; }
.pe-row-label { color: var(--pe-muted); font-weight: 800; }
.pe-token-row { display: flex; flex-wrap: wrap; gap: 8px; min-height: 54px; padding: 7px; border: 1px dashed var(--pe-border); border-radius: 14px; background: var(--pe-bg); }
.pe-token {
  touch-action: none;
  min-width: 46px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--pe-border);
  border-radius: 12px;
  background: #fff;
  color: var(--pe-text);
  font-weight: 850;
  box-shadow: 0 2px 6px rgba(28, 21, 14, .08);
}
.pe-letter { font-size: 1.25rem; }
.pe-word { min-width: auto; }
.pe-dragging { opacity: .62; transform: scale(1.04); box-shadow: 0 10px 24px rgba(28, 21, 14, .20); }

.pe-choice:focus-visible,
.pe-sort-item:focus-visible,
.pe-match-item:focus-visible,
.pe-token:focus-visible,
.pe-button:focus-visible,
.pe-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pe-accent) 35%, transparent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .pe-overlay { padding: 8px; place-items: end center; }
  .pe-dialog { width: 100%; max-height: 92vh; border-radius: 20px 20px 8px 8px; }
  .pe-header { padding: 22px 58px 10px 18px; }
  .pe-body { padding: 8px 18px 16px; }
  .pe-footer { padding: 10px 18px 20px; }
  .pe-feedback { margin: 0 18px; }
  .pe-match { grid-template-columns: 1fr; }
  .pe-token { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-overlay *, .pe-overlay *::before, .pe-overlay *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* 0.6.0 – Textbeleg markieren */
.pe-evidence-list { display: grid; gap: 9px; }
.pe-evidence-line {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--pe-border);
  border-radius: 12px; background: #fffdf7; color: var(--pe-text); text-align: left;
  font: inherit; line-height: 1.5; cursor: pointer;
}
.pe-evidence-line.pe-selected { border-color: var(--pe-accent); background: var(--pe-selected); box-shadow: inset 4px 0 0 var(--pe-accent); }

/* 0.6.0 – Lückentext per Drag & Drop */
.pe-cloze-wrap { display: grid; gap: 18px; }
.pe-cloze-text { padding: 14px 16px; border: 1px solid var(--pe-border); border-radius: 14px; background: #fffdf8; font-size: 1.08rem; line-height: 2.15; }
.pe-cloze-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 42px; margin: 0 4px; padding: 3px 6px; border: 2px dashed color-mix(in srgb, var(--pe-accent) 55%, var(--pe-border)); border-radius: 10px; background: var(--pe-bg); vertical-align: middle; }
.pe-cloze-slot:empty::after { content: "…"; color: var(--pe-muted); font-weight: 850; }
.pe-token-bank { display: flex; flex-wrap: wrap; gap: 9px; min-height: 62px; padding: 9px; border: 1px dashed var(--pe-border); border-radius: 14px; background: var(--pe-bg); }
.pe-drag-choice.pe-selected, .pe-category-token.pe-selected { outline: 3px solid color-mix(in srgb, var(--pe-accent) 35%, transparent); outline-offset: 2px; }

/* 0.6.0 – Kategorisieren */
.pe-categorize { display: grid; gap: 16px; }
.pe-category-pool-wrap { display: grid; gap: 7px; }
.pe-category-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px; padding: 9px; border: 1px dashed var(--pe-border); border-radius: 14px; background: var(--pe-bg); }
.pe-category-zones { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; }
.pe-category-zone { min-height: 132px; padding: 12px; border: 2px solid var(--pe-border); border-radius: 15px; background: #fffdf8; }
.pe-category-zone h3 { margin: 0 0 9px; font-size: 1rem; color: var(--pe-accent); }
.pe-category-drop { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 76px; padding: 7px; border: 1px dashed var(--pe-border); border-radius: 11px; background: var(--pe-bg); }
.pe-category-token { min-width: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.pe-category-token:active { cursor: grabbing; }
.pe-drag-ghost { position: fixed; z-index: 2147483647; pointer-events: none; margin: 0; transform: translate(-50%,-50%); opacity: .96; box-shadow: 0 14px 34px rgba(0,0,0,.25); }

/* 0.6.0 – Bild-Hotspot */
.pe-hotspot-stage { position: relative; overflow: hidden; border: 1px solid var(--pe-border); border-radius: 16px; background: #eee7da; display: table; margin: 0 auto; max-width: 100%; line-height: 0; }
.pe-hotspot-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 54vh; }
.pe-hotspot { position: absolute; transform: translate(-50%,-50%); padding: 0; border: 2px dashed rgba(255,255,255,.72); border-radius: 14px; background: rgba(143,100,28,.10); cursor: pointer; box-shadow: 0 0 0 2px rgba(48,35,20,.08); }
.pe-hotspot:hover, .pe-hotspot:focus-visible { background: rgba(255,233,155,.24); outline: 3px solid rgba(255,255,255,.82); outline-offset: 2px; }
.pe-hotspot.pe-selected { border-style: solid; border-color: var(--pe-accent); background: color-mix(in srgb, var(--pe-selected) 56%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pe-accent) 24%, transparent); }

@media (max-width:560px) {
  .pe-cloze-text { font-size: 1rem; line-height: 2.35; }
  .pe-cloze-slot { min-width: 82px; }
  .pe-category-zones { grid-template-columns: 1fr; }
}


/* 0.7.0 – universelle Audio-Medienebene */
.pe-audio-panel { display: grid; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--pe-border); border-radius: 14px; background: var(--pe-bg); }
.pe-audio-description { margin: 0; color: var(--pe-muted); line-height: 1.45; }
.pe-audio-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-audio-button { min-width: 112px; }
.pe-audio-status { color: var(--pe-muted); font-size: .92rem; font-weight: 700; }

/* 0.7.0 – offene Kreativantwort */
.pe-creative-response { display: grid; gap: 7px; }
.pe-creative-textarea { width: 100%; min-height: 132px; resize: vertical; padding: 13px 14px; border: 2px solid var(--pe-border); border-radius: 14px; background: #fff; color: var(--pe-text); font: inherit; font-size: 1.03rem; line-height: 1.55; }
.pe-creative-textarea:focus { outline: 3px solid color-mix(in srgb, var(--pe-accent) 22%, transparent); border-color: var(--pe-accent); }
.pe-creative-meta { min-height: 1.15em; color: var(--pe-muted); font-size: .82rem; text-align: right; }


.pe-hotspot[data-anchor="box"],
.pe-hotspot[data-anchor="top-left"],
.pe-hotspot[data-anchor="topleft"] { transform: none; }
.pe-hotspot[data-has-asset="true"] { border: none; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.pe-hotspot-asset { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; user-select: none; transition: opacity .16s ease, transform .16s ease, filter .16s ease; }
.pe-hotspot[data-has-asset="true"]:hover .pe-hotspot-asset,
.pe-hotspot[data-has-asset="true"]:focus-visible .pe-hotspot-asset,
.pe-hotspot[data-has-asset="true"].pe-selected .pe-hotspot-asset { opacity: .95; transform: scale(1.02); filter: drop-shadow(0 0 10px rgba(255,229,148,.65)); }
.pe-hotspot[data-has-asset="true"]:hover,
.pe-hotspot[data-has-asset="true"]:focus-visible,
.pe-hotspot[data-has-asset="true"].pe-selected { outline: 3px solid rgba(255,255,255,.72); outline-offset: 2px; }