/* Baustein „Baukasten: zwei Bausteine kombinieren“ (baukasten) – Entwurf A, dunkler Abschnitt „Ein Baukasten.“
   Alles unter .erl-bk-…; Farben aus den Website-Variablen, Gold #d2b27a wie im Entwurf. Ablauf: erlebnis-baukasten.js */

.erl-bk { --bk-gold: #d2b27a; --bk-soft: #e9e3d8; --bk-dim: #b9ae9d; --bk-line: rgba(243, 240, 234, .14); }
.erl-bk:not(.is-dark) { --bk-soft: var(--ink-2); --bk-dim: var(--muted); --bk-line: var(--line); }

.erl-bk-head .head { margin-bottom: 0; }

/* ---------- Gegenüberstellung ---------- */
.erl-bk-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.erl-bk-cmp { padding: 24px; border-radius: 18px; border: 1px solid var(--bk-line); }
.erl-bk-cmp p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--bk-soft); }
.erl-bk-cmp.is-hi { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.erl-bk:not(.is-dark) .erl-bk-cmp.is-hi { background: var(--ink); border-color: var(--ink); }
.erl-bk-cmp.is-hi p { color: var(--ink); }
.erl-bk:not(.is-dark) .erl-bk-cmp.is-hi p, .erl-bk:not(.is-dark) .erl-bk-cmp.is-hi .erl-bk-label { color: var(--paper); }
.erl-bk-label { display: block; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-dim); }
.erl-bk-cmp.is-hi .erl-bk-label { color: var(--muted); }

/* ---------- Mischen ---------- */
.erl-bk-play { margin-top: 72px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.erl-bk-left, .erl-bk-right { flex: 1 1 420px; min-width: 0; }
.erl-bk-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3vw, 38px); line-height: 1.1; color: var(--paper); }
.erl-bk:not(.is-dark) .erl-bk-title { color: var(--ink); }
.erl-bk-count { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--bk-soft); }

.erl-bk-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.erl-bk-blk { appearance: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 96px; padding: 14px 16px;
  border-radius: 16px; border: 1px solid rgba(243, 240, 234, .18); background: transparent; color: var(--paper); cursor: pointer; text-align: left;
  font: inherit; line-height: 1.25; transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; }
.erl-bk:not(.is-dark) .erl-bk-blk { border-color: var(--line); color: var(--ink); }
.erl-bk-blk:hover { border-color: var(--bk-gold); transform: translateY(-2px); }
.erl-bk-blk[aria-pressed="true"] { background: var(--bk-gold); border-color: var(--bk-gold); color: var(--ink); }
.erl-bk-blk strong { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.erl-bk-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

.erl-bk-surprise { appearance: none; margin-top: 14px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(243, 240, 234, .3);
  background: transparent; color: var(--paper); font: 600 13px/1.2 var(--sans); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.erl-bk:not(.is-dark) .erl-bk-surprise { border-color: var(--line); color: var(--ink); }
.erl-bk-surprise:hover { border-color: var(--bk-gold); }
.erl-bk-blk:focus-visible, .erl-bk-surprise:focus-visible, .erl-bk-send:focus-visible { outline: 2px solid var(--bk-gold); outline-offset: 2px; }

/* ---------- Ergebnis ---------- */
.erl-bk-hint { min-height: 260px; border-radius: 20px; border: 1px dashed rgba(243, 240, 234, .25); display: flex; align-items: center; justify-content: center;
  padding: 32px; text-align: center; color: var(--bk-dim); font-size: 16px; line-height: 1.5; }
.erl-bk:not(.is-dark) .erl-bk-hint { border-color: var(--sand); }
.erl-bk-hint[hidden], .erl-bk-combo[hidden], .erl-bk-form[hidden], .erl-bk-thanks[hidden] { display: none; }
.erl-bk-combo { min-height: 260px; border-radius: 20px; background: var(--paper); color: var(--ink); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.erl-bk:not(.is-dark) .erl-bk-combo { background: #fff; }
.erl-bk-combo.is-pop { animation: erl-bk-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.erl-bk-combo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.erl-bk-pair { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--muted); }
.erl-bk-tag { flex: none; padding: 4px 8px; border-radius: 99px; font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: #fff; }
.erl-bk-tag.is-real { background: var(--bronze); }
.erl-bk-ctitle { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3vw, 36px); line-height: 1.05; color: var(--ink); }
.erl-bk-ctext { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@keyframes erl-bk-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Und eure Idee? ---------- */
.erl-bk-idea { margin-top: 20px; padding: 22px; border-radius: 20px; border: 1px solid var(--bk-line); }
.erl-bk-form { margin: 0; }
.erl-bk-input { display: block; width: 100%; margin-top: 10px; min-height: 90px; padding: 10px 14px; border: 1px solid rgba(22, 20, 18, .22); border-radius: 12px;
  background: #fff; color: var(--ink); font: 500 16px/1.5 var(--sans); resize: vertical; }
.erl-bk-input:focus { outline: 2px solid var(--bronze); outline-offset: 1px; }
.erl-bk-send { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid var(--bk-gold); background: var(--bk-gold); color: var(--ink); font: 600 13px/1.2 var(--sans); font-stretch: 125%;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.erl-bk-send:hover { transform: translateY(-1px); }
.erl-bk-send[disabled] { opacity: .35; cursor: default; transform: none; }
.erl-bk-thanks { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--paper); animation: erl-bk-rise .6s ease; }
.erl-bk:not(.is-dark) .erl-bk-thanks { color: var(--ink); }
@keyframes erl-bk-rise { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Kombinationen als Zeilen: nur mit dem Stift (Bearbeiten) sichtbar */
.erl-bk-edit { display: none; }
.kwab-editing .erl-bk-edit { display: block; margin: 14px 0 0; padding: 12px 14px 12px 32px; border: 1px dashed var(--bk-gold); border-radius: 12px;
  background: #fff; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.kwab-editing .erl-bk-edit::before { content: "Kombinationen: a+b | Titel | Text | ja/nein"; display: block; margin: 0 0 6px -18px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.kwab-editing .erl-bk-thanks[hidden] { display: block; }

@media (max-width: 560px) {
  .erl-bk-compare { grid-template-columns: 1fr; margin-top: 32px; }
  .erl-bk-play { margin-top: 48px; gap: 28px; }
  .erl-bk-left, .erl-bk-right { flex-basis: 100%; }
  .erl-bk-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erl-bk-blk { min-height: 80px; padding: 12px 14px; }
  .erl-bk-hint, .erl-bk-combo { min-height: 200px; }
  .erl-bk-combo { padding: 22px; }
  .erl-bk-send { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .erl-bk-combo.is-pop, .erl-bk-thanks { animation: none; }
  .erl-bk-blk, .erl-bk-send { transition: none; }
  .erl-bk-blk:hover, .erl-bk-send:hover { transform: none; }
}