/* Familymap - Belohnungsmodul v2 */
.bb-app, .bb-app *{ box-sizing:border-box; }
.bb-app{ max-width:100%; margin:0; }
.bb-wrap{
  padding:16px;
  border-radius:24px;
  background: linear-gradient(180deg,#fffdfd,#f8fbff);
  box-shadow:0 16px 42px rgba(0,0,0,.08);
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border:2px solid rgba(0,0,0,.04);
}
.bb-shell{ display:flex; flex-direction:column; gap:16px; }
.bb-context-card,.bb-stage-card{
  background: rgba(255,255,255,.82);
  border:2px solid rgba(0,0,0,.04);
  border-radius:24px;
  box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.bb-context-card{ padding:16px; }
.bb-stage-card{ padding:16px; }
.bb-module-title-wrap{ display:flex; flex-direction:column; gap:2px; }
.bb-module-kicker{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.bb-app-title{ font-size:28px; font-weight:800; line-height:1; }
.bb-help-strip{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.66);
  border:2px solid rgba(28,89,111,.12);
  box-shadow:0 10px 24px rgba(40,94,120,.08);
}
.bb-help-strip__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 4px 0 2px;
  color:#47616f;
  font-size:13px;
  font-weight:900;
}
.bb-help-strip__label span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:linear-gradient(135deg,#2b7f95,#66b7c7);
  color:#fff;
  box-shadow:0 8px 18px rgba(40,94,120,.16);
}
.bb-help-links{ display:flex; flex-wrap:wrap; gap:8px; }
.bb-help-btn{
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid rgba(28,89,111,.14);
  border-radius:999px;
  background:linear-gradient(145deg,#ffffff,#f1fbff);
  color:#123044;
  padding:8px 12px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
  text-decoration:none;
}
.bb-help-btn span{
  width:22px; height:22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#dff5ff; color:#1b5b78; font-size:14px;
}
.bb-context-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.bb-core-selector-wrap{
  min-width:280px;
  padding:8px 10px;
  border-radius:18px;
  background: rgba(255,255,255,.94);
  border:2px solid rgba(0,0,0,.05);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.bb-context-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:16px; margin-top:14px; align-items:stretch; }
.bb-context-main{ display:flex; flex-direction:column; gap:12px; }
.bb-child-badge{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  padding:10px 14px; border-radius:999px;
  background: linear-gradient(145deg,#fff,#f5fbff);
  border:2px solid rgba(0,0,0,.05);
  font-weight:800;
}
.bb-child-badge .fm-symbol-img,
.bb-label .fm-symbol-img{
  width:38px;
  height:38px;
  display:block;
  object-fit:contain;
}
.bb-label{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:16px;
  background:#fff;
  border:2px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.bb-goal-focus-card{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:22px; background:linear-gradient(180deg,#fffef7,#fff); border:2px solid rgba(0,0,0,.04); }
.bb-goal-focus-label{ font-size:14px; font-weight:700; opacity:.68; }
.bb-goal{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bb-goal-select{
  min-width:260px;
  min-height:52px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.10);
  padding:12px 14px;
  font-size:15px;
  line-height:1.35;
  outline:none;
  background:#fff;
}
.bb-companion-card{ display:flex; gap:12px; align-items:center; padding:14px; border-radius:22px; background:linear-gradient(180deg,#ffffff,#f9fcff); border:2px solid rgba(0,0,0,.04); }
.bb-companion-stage{
  width:110px; height:110px; flex:0 0 110px;
  border-radius:20px; background:rgba(255,255,255,.94);
  border:2px solid rgba(0,0,0,.05);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bb-companion-stage img{ width:100%; height:100%; object-fit:contain; }
.bb-companion-title{ font-weight:800; font-size:16px; }
.bb-companion-copy{ font-weight:700; line-height:1.22; opacity:.82; }

.bb-stage-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.bb-progress-wrap{
  min-width:260px;
  padding:12px 14px;
  border-radius:20px;
  background: rgba(255,255,255,.88);
  border:2px solid rgba(0,0,0,.04);
}
.bb-progress-text{ font-weight:800; font-size:17px; }
.bb-progress-bar{ margin-top:8px; height:14px; border-radius:999px; background:rgba(0,0,0,.06); overflow:hidden; }
.bb-progress-fill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#7ee7ff,#a6ffb0,#ffe27a); transition:width .35s ease; }
.bb-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.bb-btn{
  border:none; border-radius:18px; padding:12px 18px;
  font-weight:800; cursor:pointer;
  background:rgba(0,0,0,.14); color:#111;
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.bb-btn:hover{ filter:brightness(1.04); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.bb-btn:active{ transform:scale(.98); }
.bb-plus{ background:linear-gradient(145deg,#111,#2f2f2f); color:#fff; }
.bb-stage-hint{
  margin-top:12px; padding:10px 14px; border-radius:999px; display:inline-flex; align-items:center;
  gap:8px; font-weight:700; background:rgba(255,255,255,.88); border:2px solid rgba(0,0,0,.04);
}
.bb-stage{
  position:relative; margin-top:14px; border-radius:24px;
  background: var(--bb-stage, radial-gradient(circle at 20% 20%, #ffffff, #eef8ff));
  overflow:hidden; min-height:560px; border:2px solid rgba(0,0,0,.05);
  display:flex; flex-direction:column;
}
.bb-fx-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.bb-scene{ position:relative; padding:22px; flex:1; display:flex; align-items:center; justify-content:center; }

/* Puzzle */
.bb-puzzle{
  display:none; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:980px; width:100%; margin:0 auto;
  border-radius:22px; overflow:hidden; border:2px solid rgba(0,0,0,.06);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}
.bb-puzzle-cell{ aspect-ratio:1/1; background:rgba(255,255,255,.82); position:relative; overflow:hidden; border-right:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); }
.bb-puzzle-cover{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(240,250,255,.84)); color:rgba(0,0,0,.55);
}
.bb-puzzle-cell.bb-revealed .bb-puzzle-cover{ display:none; }
.bb-puzzle-piece{ position:absolute; inset:0; background-repeat:no-repeat; transform:scale(.98); opacity:var(--bb-preview, .10); }
.bb-puzzle-cell.bb-revealed .bb-puzzle-piece{ transform:scale(1); opacity:1; transition:transform .25s ease, opacity .2s ease; }
.bb-puzzle-cell.bb-clickable{ cursor:pointer; outline:4px solid rgba(255,255,255,.82); outline-offset:-4px; }

/* Stickerturm */
.bb-tower{ display:none; max-width:860px; width:100%; margin:0 auto; }
.bb-tower-area{
  border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(240,250,255,.82));
  border:2px solid rgba(0,0,0,.05); min-height:360px; display:flex; align-items:flex-end; justify-content:center; padding:18px 18px 42px;
  box-shadow:0 16px 34px rgba(0,0,0,.08);
}
.bb-tower-stack{ display:flex; flex-direction:column-reverse; gap:12px; align-items:center; }
.bb-tower-brick{
  width:190px; height:88px; border-radius:18px; border:3px solid rgba(0,0,0,.14); position:relative;
  box-shadow:0 14px 28px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center;
  transform:translateY(12px) scale(.96); opacity:0; transition:transform .35s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
}
.bb-tower-brick.bb-in{ transform:translateY(0) scale(1); opacity:1; }
.bb-tower-brick:before{ content:''; position:absolute; top:10px; left:16px; right:16px; height:18px; border-radius:999px; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.25); box-shadow:inset 0 -3px 0 rgba(0,0,0,.08); }
.bb-brick-sticker{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:80px; height:56px; border-radius:14px; background:rgba(255,255,255,.93); border:2px solid rgba(0,0,0,.10); box-shadow:0 10px 18px rgba(0,0,0,.18); font-size:34px; transform:rotate(-4deg); }
.bb-brick-sticker:after{ content:''; position:absolute; right:10px; top:10px; width:10px; height:10px; border-radius:999px; background:rgba(0,0,0,.10); opacity:.25; }
.bb-color-0{ background:linear-gradient(145deg,#fff2a8,#ffd36b); }
.bb-color-1{ background:linear-gradient(145deg,#a8ffda,#6ff0c2); }
.bb-color-2{ background:linear-gradient(145deg,#a8d6ff,#6fb8ff); }
.bb-color-3{ background:linear-gradient(145deg,#ffb5f7,#ff83e6); }
.bb-color-4{ background:linear-gradient(145deg,#c7ffb2,#86f07a); }
.bb-color-5{ background:linear-gradient(145deg,#ffd1a8,#ffa86f); }
.bb-roof{ height:104px; border-radius:18px; clip-path:polygon(0% 100%, 50% 10%, 100% 100%); }
.bb-roof:before{ top:38px; height:16px; }
.bb-roof .bb-brick-sticker{ transform:rotate(3deg) translateY(10px); }

/* Schatzkarte - bildunabhaengige MVP-Vorbereitung */
.bb-treasure{ display:none; max-width:900px; width:100%; margin:0 auto; }
.bb-treasure-map{
  position:relative; min-height:430px; border-radius:28px; overflow:hidden;
  border:2px solid rgba(112,73,35,.16);
  background:
    radial-gradient(circle at 78% 22%, rgba(255,225,133,.72) 0 9%, transparent 10%),
    radial-gradient(circle at 18% 76%, rgba(95,189,169,.24) 0 15%, transparent 16%),
    linear-gradient(145deg,#fff5ca,#f4dc98 48%,#eecb7b);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-color:#fffdf4;
  box-shadow:0 18px 42px rgba(94,65,26,.18);
}
.bb-treasure-map:before{
  content:''; position:absolute; inset:26px; border-radius:24px;
  border:3px dashed rgba(121,84,35,.22);
}
.bb-treasure-map[style*="background-image"]:before,
.bb-treasure-map[style*="reward_treasure_map"]:before{ display:none; }
.bb-treasure-map[style*="background-image"] .bb-treasure-route,
.bb-treasure-map[style*="background-image"] .bb-treasure-island{ display:none; }
.bb-treasure-title{
  position:absolute; left:28px; top:24px; z-index:2;
  padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.82);
  border:2px solid rgba(121,84,35,.12); font-weight:900; color:#57401f;
}
.bb-treasure-route{
  position:absolute; left:12%; right:18%; top:47%; height:0;
  border-top:8px dotted rgba(127,82,38,.28); transform:rotate(-10deg);
}
.bb-treasure-marker{
  position:absolute; z-index:4; width:13%; max-width:118px; min-width:64px; aspect-ratio:1/1; height:auto; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); border:3px solid rgba(129,92,44,.18);
  color:#a56a16; font-size:26px; font-weight:900;
  box-shadow:0 12px 22px rgba(93,63,27,.15);
  transform:translate(-50%,-50%);
  transition:transform .25s ease, background .2s ease, box-shadow .2s ease;
}
.bb-treasure-marker img{ width:156%; height:156%; object-fit:contain; display:block; pointer-events:none; }
.bb-treasure-marker.is-found{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.bb-treasure-marker.is-new{ animation:bbTreasurePop .48s ease; }
.bb-treasure-island{
  position:absolute; right:8%; top:20%; width:190px; height:150px; border-radius:52% 48% 46% 54%;
  background:linear-gradient(145deg,#b9efb2,#71d793); border:4px solid rgba(71,139,82,.18);
  box-shadow:0 18px 35px rgba(56,120,83,.18);
}
.bb-treasure-island span{
  position:absolute; left:58px; top:42px; width:58px; height:76px; border-radius:34px 34px 16px 16px;
  background:linear-gradient(145deg,#9a6632,#6d441f);
  box-shadow:inset 0 12px 0 rgba(255,255,255,.12);
}
.bb-treasure-island span:before{
  content:''; position:absolute; left:-34px; top:-46px; width:118px; height:72px;
  border-radius:80px 80px 12px 12px; background:linear-gradient(145deg,#86e098,#38bb72);
}
.bb-treasure-chest{
  position:absolute; right:13%; top:11%; width:22%; max-width:210px; min-width:120px; aspect-ratio:1/1; height:auto; border-radius:12px 12px 18px 18px;
  background:linear-gradient(145deg,#b97233,#7a431d); border:4px solid rgba(67,39,14,.24);
  box-shadow:0 16px 28px rgba(80,45,14,.24);
  display:flex; align-items:center; justify-content:center; color:#fff2a0; font-size:34px;
}
.bb-treasure-chest.has-image{ background:transparent; border:0; box-shadow:none; right:20%; top:0; width:26%; max-width:240px; z-index:2; }
.bb-treasure-chest.has-image img{ width:100%; height:100%; object-fit:contain; display:block; }
.bb-treasure-chest.has-image:before{ display:none; }
.bb-treasure-chest:before{
  content:''; position:absolute; left:-4px; right:-4px; top:-28px; height:42px;
  border-radius:42px 42px 10px 10px; background:linear-gradient(145deg,#d99443,#92521f);
  border:4px solid rgba(67,39,14,.24);
}
.bb-treasure-chest.is-open:before{ transform:translateY(-18px) rotate(-10deg); transform-origin:left bottom; }
@keyframes bbTreasurePop{ 0%{transform:scale(.72)} 65%{transform:scale(1.12)} 100%{transform:scale(1)} }

.bb-sticker-picker{
  position:static; border-radius:22px; background:rgba(255,255,255,.92); border:2px solid rgba(0,0,0,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.10); padding:12px 12px 14px; display:block; max-width:980px; margin:16px auto; width:calc(100% - 32px);
}
.bb-sticker-title{ font-weight:800; margin:2px 2px 10px; opacity:.85; }
.bb-sticker-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.bb-sticker-btn{ border-radius:16px; border:2px solid rgba(0,0,0,.08); background:#fff; cursor:pointer; padding:10px 0; font-size:28px; line-height:1; transition:transform .08s ease, filter .2s ease; }
.bb-sticker-btn:active{ transform:scale(.98); }
.bb-sticker-btn:hover{ filter:brightness(1.06); }

.bb-finale-overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.18); backdrop-filter:blur(2px); }
.bb-finale-overlay.bb-show{ display:flex; }
.bb-finale-card{ width:min(920px, calc(100% - 28px)); background:#fff; border-radius:24px; padding:22px 18px; border:2px solid rgba(0,0,0,.06); box-shadow:0 20px 60px rgba(0,0,0,.2); text-align:center; }
.bb-finale-emoji{ font-size:56px; }
.bb-finale-title{ font-weight:800; font-size:36px; letter-spacing:.5px; margin-top:6px; }
.bb-finale-sub{ font-weight:700; opacity:.8; margin:6px 0 14px; }
.bb-finale-img{ width:100%; max-width:820px; border-radius:18px; border:2px solid rgba(0,0,0,.06); overflow:hidden; margin:12px auto; box-shadow:0 18px 60px rgba(0,0,0,.18); }
.bb-finale-img img{ width:100%; height:auto; display:block; }

.bb-footer{ margin-top:10px; opacity:.78; font-weight:700; }

/* Themes */
.bb-wrap{
  --bb-bg-main: linear-gradient(180deg,#fffdfd,#f8fbff);
  --bb-stage-bg: radial-gradient(circle at 20% 20%, #ffffff, #eef8ff);
  --bb-progress: linear-gradient(90deg,#7ee7ff,#a6ffb0,#ffe27a);
  --bb-accent-soft: rgba(255,255,255,.88);
  --bb-accent-border: rgba(0,0,0,.04);
  --bb-chip-bg: linear-gradient(145deg,#fff,#f5fbff);
}
.bb-wrap{
  background: var(--bb-bg-main);
}
.bb-progress-fill{
  background: var(--bb-progress);
}
.bb-stage{
  background: var(--bb-stage-bg);
}
.bb-context-card,
.bb-stage-card{
  border-color: var(--bb-accent-border);
}
.bb-goal-focus-card,
.bb-companion-card,
.bb-progress-wrap,
.bb-core-selector-wrap,
.bb-stage-hint,
.bb-goal{
  background: var(--bb-accent-soft);
}
.bb-child-badge{
  background: var(--bb-chip-bg);
}
.bb-theme-football{
  --bb-bg-main: linear-gradient(180deg,#fffef4,#f2fff6);
  --bb-stage-bg: radial-gradient(circle at 20% 20%, #fffef8, #e7fff0 42%, #eef8ff 100%);
  --bb-progress: linear-gradient(90deg,#ffd54f,#81c784,#4fc3f7);
  --bb-accent-soft: linear-gradient(145deg, rgba(255,255,255,.95), rgba(245,255,245,.90));
  --bb-accent-border: rgba(94, 174, 92, .18);
  --bb-chip-bg: linear-gradient(145deg,#fffde7,#ecffef);
}
.bb-theme-unicorn{
  --bb-bg-main: linear-gradient(180deg,#fff7fe,#f8f2ff);
  --bb-stage-bg: radial-gradient(circle at 20% 20%, #fffdfd, #ffe6fb 40%, #ece8ff 100%);
  --bb-progress: linear-gradient(90deg,#ff9de1,#c4a1ff,#80deea);
  --bb-accent-soft: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,238,252,.92));
  --bb-accent-border: rgba(213, 109, 193, .18);
  --bb-chip-bg: linear-gradient(145deg,#fff8fd,#f4ecff);
}
.bb-theme-dino{
  --bb-bg-main: linear-gradient(180deg,#fbfff1,#fff9ef);
  --bb-stage-bg: radial-gradient(circle at 20% 20%, #fffef8, #ecffd8 38%, #fff3d6 100%);
  --bb-progress: linear-gradient(90deg,#aed581,#ffd166,#4fc3f7);
  --bb-accent-soft: linear-gradient(145deg, rgba(255,255,255,.95), rgba(248,255,234,.92));
  --bb-accent-border: rgba(126, 170, 72, .18);
  --bb-chip-bg: linear-gradient(145deg,#faffef,#fff8e7);
}
.bb-theme-space{
  --bb-bg-main: linear-gradient(180deg,#f4f3ff,#eef8ff);
  --bb-stage-bg: radial-gradient(circle at 25% 18%, #ffffff, #dde3ff 36%, #e3f8ff 100%);
  --bb-progress: linear-gradient(90deg,#9575cd,#64b5f6,#fff176);
  --bb-accent-soft: linear-gradient(145deg, rgba(255,255,255,.95), rgba(236,241,255,.92));
  --bb-accent-border: rgba(117, 96, 184, .18);
  --bb-chip-bg: linear-gradient(145deg,#f7f5ff,#eef7ff);
}
.bb-theme-friends{
  --bb-bg-main: linear-gradient(180deg,#fff7f5,#f8fcff);
  --bb-stage-bg: radial-gradient(circle at 20% 20%, #fffefc, #ffe6ec 35%, #e6f7ff 100%);
  --bb-progress: linear-gradient(90deg,#ff8a80,#ffd180,#80d8ff);
  --bb-accent-soft: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,241,242,.92));
  --bb-accent-border: rgba(235, 123, 123, .18);
  --bb-chip-bg: linear-gradient(145deg,#fff8f8,#eefaff);
}

/* Modal */
.bb-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(18,30,38,.32); backdrop-filter:blur(4px); z-index:9999; padding:14px; }
.bb-modal.bb-show{ display:flex; }
.bb-modal-card{ width:min(940px, calc(100% - 18px)); background:linear-gradient(180deg,#ffffff,#f8fcff); border-radius:26px; border:2px solid rgba(26,86,112,.10); box-shadow:0 24px 76px rgba(12,37,50,.26); padding:20px; max-height:calc(100vh - 28px); overflow:auto; -webkit-overflow-scrolling:touch; }
.bb-modal-title{ font-weight:900; font-size:24px; line-height:1.15; margin-bottom:6px; color:#143143; }
.bb-modal-intro{ margin:0 0 14px; max-width:76ch; color:#506674; font-weight:750; line-height:1.4; }
.bb-help-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(18,30,38,.28);
  backdrop-filter:blur(2px);
}
.bb-help-overlay.bb-show,
.bb-help-overlay:target{ display:flex; }
.bb-help-card{
  position:relative;
  width:min(760px, calc(100% - 18px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#f8fcff);
  border:2px solid rgba(26,86,112,.12);
  box-shadow:0 24px 70px rgba(12,37,50,.22);
  padding:22px;
}
.bb-help-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.07);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  color:#123044;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.bb-help-kicker{ font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#1f6d8a; }
.bb-help-card h2{ margin:6px 42px 10px 0; font-size:26px; line-height:1.08; }
.bb-help-card p{ margin:0 0 14px; font-size:17px; font-weight:700; line-height:1.36; color:#243b48; }
.bb-help-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.bb-help-grid div,
.bb-help-visual-note{ border-radius:18px; background:#f5fbff; border:2px solid rgba(31,109,138,.10); padding:12px; }
.bb-help-grid strong{ display:block; margin-bottom:4px; font-weight:900; }
.bb-help-grid span{ display:block; font-weight:700; line-height:1.28; }
.bb-help-steps{ margin:0 0 14px; padding-left:22px; font-weight:800; line-height:1.4; }
.bb-help-steps li{ margin-bottom:6px; }
.bb-help-visual-note{ font-weight:800; color:#315264; }
.bb-settings-section{ margin-top:12px; padding:14px; border-radius:22px; background:rgba(255,255,255,.76); border:2px solid rgba(31,109,138,.08); box-shadow:0 10px 24px rgba(12,37,50,.05); }
.bb-settings-section-head{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; margin-bottom:10px; }
.bb-settings-section-head > span{ display:grid; place-items:center; width:38px; height:38px; border-radius:14px; background:linear-gradient(145deg,#e8f8ff,#ffffff); color:#1f6d8a; font-weight:900; border:2px solid rgba(31,109,138,.12); }
.bb-settings-section-head strong{ display:block; color:#143143; font-size:17px; line-height:1.2; }
.bb-settings-section-head small{ display:block; margin-top:2px; color:#667987; font-weight:750; line-height:1.28; }
.bb-row{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.bb-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bb-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.bb-row-4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; }
.bb-row label{ color:#1f3647; font-weight:900; }
.bb-row input[type="file"], .bb-row select{ min-height:46px; border-radius:14px; border:2px solid rgba(31,109,138,.12); padding:11px 12px; font-size:14px; line-height:1.35; background:#fff; }
.bb-row-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; position:sticky; bottom:0; background:rgba(255,255,255,.96); padding:12px 0 4px; border-top:1px solid rgba(0,0,0,.08); }
.bb-modal-note{ opacity:.75; font-weight:650; margin-top:8px; }
.bb-upload-preview{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bb-upload-thumb{ width:190px; height:126px; border-radius:16px; border:2px solid rgba(0,0,0,.08); background:rgba(0,0,0,.03); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.bb-upload-thumb img{ width:100%; height:100%; object-fit:cover; }

.bb-login-hint{ display:none; margin-top:14px; }
.bb-login-hint.bb-show{ display:block; }
.bb-login-card{ padding:14px; border-radius:18px; border:2px dashed rgba(0,0,0,.18); background:rgba(255,255,255,.7); }
.bb-login-title{ font-weight:800; }
.bb-login-text{ opacity:.8; font-weight:700; margin-top:6px; }

@media (max-width:900px){
  .bb-context-head,.bb-stage-top{ flex-direction:column; align-items:flex-start; }
  .bb-context-grid{ grid-template-columns:1fr; }
  .bb-row-4,.bb-row-3,.bb-row-2{ grid-template-columns:1fr; }
  .bb-modal-card{ padding:16px; border-radius:22px; }
  .bb-settings-section{ padding:12px; border-radius:20px; }
  .bb-sticker-grid{ grid-template-columns:repeat(6,1fr); }
  .bb-stage{ min-height:480px; }
  .bb-sticker-picker{ width:calc(100% - 24px); }
  .bb-app-title{ font-size:24px; }
}

/* v2.1.0 stage refinement */
.bb-scene{padding:26px 26px 10px}
.bb-stage-hint{margin-bottom:2px}
.bb-puzzle{background:#fff}
.bb-puzzle-cell{border-right:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55)}
.bb-puzzle-cell.bb-revealed{box-shadow: inset 0 0 0 2px rgba(255,255,255,.22)}
.bb-puzzle-cell.bb-revealed .bb-puzzle-piece{filter:saturate(1.03) contrast(1.02)}
.bb-puzzle-cell.bb-clickable{outline:5px solid rgba(255,230,120,.92); outline-offset:-5px; z-index:2}
.bb-puzzle-cover{font-size:24px; background:linear-gradient(145deg, rgba(255,255,255,.97), rgba(233,246,255,.88))}
.bb-tower-area{position:relative;overflow:hidden}
.bb-tower-area:after{content:'';position:absolute;left:8%;right:8%;bottom:18px;height:16px;border-radius:999px;background:rgba(0,0,0,.06)}
.bb-tower-stack{gap:10px}
.bb-tower-brick{width:210px;height:92px}
.bb-tower-brick:before{left:22px; right:22px; top:12px}
.bb-tower-brick:after{content:'';position:absolute;left:18px;right:18px;bottom:12px;height:12px;border-radius:999px;background:rgba(0,0,0,.05)}
.bb-brick-sticker{width:90px;height:60px;font-size:36px;box-shadow:0 12px 18px rgba(0,0,0,.16)}
.bb-roof{height:112px; width:216px; clip-path:polygon(50% 0%, 100% 42%, 100% 100%, 0% 100%, 0% 42%)}
.bb-roof:before{top:44px}
@media (max-width:900px){
  .bb-tower-brick{width:178px;height:84px}
  .bb-roof{width:184px;height:102px}
  .bb-brick-sticker{width:78px;height:54px;font-size:32px}
}

.bb-theme-football .bb-plus{ box-shadow:0 10px 24px rgba(83,164,90,.26); }
.bb-theme-unicorn .bb-plus{ box-shadow:0 10px 24px rgba(209,107,188,.26); }
.bb-theme-dino .bb-plus{ box-shadow:0 10px 24px rgba(143,169,61,.26); }
.bb-theme-space .bb-plus{ box-shadow:0 10px 24px rgba(108,100,193,.26); }
.bb-theme-friends .bb-plus{ box-shadow:0 10px 24px rgba(240,117,117,.26); }

.bb-theme-football .bb-child-badge{ color:#2e7d32; }
.bb-theme-unicorn .bb-child-badge{ color:#ad3d8f; }
.bb-theme-dino .bb-child-badge{ color:#5f8e2d; }
.bb-theme-space .bb-child-badge{ color:#5a4eb4; }
.bb-theme-friends .bb-child-badge{ color:#d95d5d; }

.bb-puzzle-cell.bb-revealed{animation:bbRevealGlow .4s ease}@keyframes bbRevealGlow{0%{box-shadow:0 0 0}50%{box-shadow:0 0 18px rgba(255,255,255,.8)}100%{box-shadow:none}}

.bb-tower-brick{box-shadow:0 18px 32px rgba(0,0,0,.25)}


/* v2.3.2 – Puzzlemodus: Stickerliste ausblenden, Stickerturm unverändert */
.bb-stage:has(.bb-puzzle[style*="display: grid"]) .bb-sticker-picker{
  display:none !important;
}
.bb-stage:has(.bb-treasure[style*="display: block"]) .bb-sticker-picker{
  display:none !important;
}


/* v2.3.3 clean – echtes MEGA-Overlay über der ganzen Seite */
.bb-finale-overlay.bb-show{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.35) !important;
  /* Ein Backdrop-Filter kann eingebettete MP4-Frames in Chromium unsichtbar
     machen, obwohl der Ton weiterlaeuft. Die ruhige Abdunklung reicht hier. */
  backdrop-filter: none !important;
}

/* v2.3.3 clean – Aufdecken-Button unten, nur im Puzzlemodus */
.bb-reveal-panel{
  display:none;
  justify-content:center;
  margin: 16px auto 4px;
  max-width: 980px;
  width: calc(100% - 32px);
}
.bb-reveal-panel[hidden]{
  display:none !important;
}
.bb-stage:has(.bb-puzzle[style*="display: grid"]) + .bb-reveal-panel,
.bb-stage-card:has(.bb-puzzle[style*="display: grid"]) .bb-reveal-panel,
.bb-stage:has(.bb-treasure[style*="display: block"]) + .bb-reveal-panel,
.bb-stage-card:has(.bb-treasure[style*="display: block"]) .bb-reveal-panel{
  display:flex;
}
.bb-reveal-btn{
  min-width: 240px;
  min-height: 62px;
  border-radius: 22px;
  background: linear-gradient(145deg,#111,#333) !important;
  color:#fff !important;
  font-size: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.bb-reveal-btn:hover{
  transform: translateY(-1px);
}
.bb-reveal-info{
  width:min(440px,100%);
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:20px;
  background:linear-gradient(145deg,#ffffff,#f1fbff);
  border:2px solid rgba(31,109,138,.12);
  color:#143143;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 24px rgba(12,37,50,.08);
}
.bb-jubel-panel{
  display:flex;
  justify-content:center;
  margin: 16px auto 4px;
  max-width: 980px;
  width: calc(100% - 32px);
}
.bb-jubel-panel[hidden]{
  display:none !important;
}
.bb-jubel-btn{
  min-width: 260px;
  min-height: 62px;
  border-radius: 22px;
  background: linear-gradient(145deg,#f7c84b,#f08736) !important;
  color:#243447 !important;
  font-size: 20px;
  box-shadow: 0 14px 32px rgba(199,124,35,.22);
}
.bb-jubel-btn::before{
  content:"✨ ";
}
.bb-jubel-btn:hover{
  transform: translateY(-1px);
}
@media (max-width:900px){
  .bb-reveal-panel{ width: calc(100% - 24px); }
  .bb-reveal-info{ width:100%; }
  .bb-reveal-btn,
  .bb-jubel-btn{ width: 100%; }
  .bb-jubel-panel{ width: calc(100% - 24px); }
}

/* rebuild 2.3.6 overlay viewport */
.bb-finale-overlay.bb-show{
 position:fixed !important;
 inset:0 !important;
 z-index:999999 !important;
 align-items:flex-start !important;
 padding:32px 14px !important;
 overflow-y:auto !important;
}


/* v2.4.0 – Embed-/Quick-Award-Modus */
.bb-embed-app, .bb-embed-app *{ box-sizing:border-box; }
.bb-embed-app{
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:14px;
}
.bb-embed-card{
  max-width:640px;
  margin:0 auto;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:2px solid rgba(0,0,0,.06);
  box-shadow:0 16px 42px rgba(0,0,0,.10);
  padding:18px;
}
.bb-embed-kicker{
  font-weight:800;
  opacity:.6;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
}
.bb-embed-card h2{
  margin:6px 0 8px;
  font-size:28px;
}
.bb-embed-lead{
  font-weight:700;
  font-size:18px;
  margin:0 0 12px;
}
.bb-embed-context{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(0,0,0,.05);
  margin:12px 0;
  font-weight:700;
}
.bb-embed-label{
  display:block;
  font-weight:800;
  margin:14px 0 6px;
}
.bb-embed-goal{
  width:100%;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.10);
  padding:10px 12px;
  font-size:16px;
  background:#fff;
}
.bb-embed-note{
  padding:10px 12px;
  border-radius:16px;
  background:#fff8df;
  font-weight:700;
  margin:12px 0;
}
.bb-embed-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.bb-embed-award{
  background:linear-gradient(145deg,#111,#333) !important;
  color:#fff !important;
}
.bb-embed-return,.bb-embed-close{
  background:rgba(0,0,0,.12) !important;
  color:#111 !important;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.bb-embed-success{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  background:#effff1;
  border:2px solid rgba(70,160,80,.15);
}

/* v2.4.2 stable embed experience */
.bb-embed-experience{margin-top:16px;padding:16px;border-radius:24px;background:linear-gradient(180deg,#fffef9,#f6fbff);border:2px solid rgba(0,0,0,.06);box-shadow:0 14px 34px rgba(0,0,0,.08);animation:bbEmbedAppear .45s ease}
@keyframes bbEmbedAppear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bb-embed-scene-mini{position:relative;overflow:hidden;border-radius:22px;padding:22px;min-height:220px;background:linear-gradient(135deg,#ffe0f2,#e7f4ff,#f7ffe3)}
.bb-embed-sparkle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:74px;opacity:.16;animation:bbPulse 1.35s infinite}
@keyframes bbPulse{0%{transform:scale(.9);opacity:.08}50%{transform:scale(1.08);opacity:.2}100%{transform:scale(.9);opacity:.08}}
.bb-embed-mini-puzzle{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:300px;margin:0 auto}
.bb-embed-mini-piece{aspect-ratio:1/1;border-radius:18px;background:rgba(255,255,255,.82);border:2px solid rgba(0,0,0,.06)}
.bb-embed-mini-piece.is-new{display:flex;align-items:center;justify-content:center;font-size:52px;background:linear-gradient(135deg,#ffe58f,#ffd8f2,#cbf1ff);animation:bbPiece .85s ease}
@keyframes bbPiece{0%{transform:scale(.2) rotate(-12deg);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.bb-embed-mini-tower{position:relative;z-index:2;width:220px;margin:0 auto;display:flex;flex-direction:column-reverse;gap:9px}
.bb-embed-mini-block{min-height:56px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.14)}
.bb-embed-mini-block.a{background:#63c86d}.bb-embed-mini-block.b{background:#5dbaf3}.bb-embed-mini-block.c{background:#c88cff;animation:bbDrop .85s ease}
@keyframes bbDrop{0%{transform:translateY(-120px)}65%{transform:translateY(12px)}100%{transform:none}}
.bb-embed-companion-mini{position:relative;z-index:2;margin-top:18px;display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.86);border-radius:22px;padding:14px}
.bb-embed-avatar-mini{width:76px;height:76px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:42px;box-shadow:0 10px 22px rgba(0,0,0,.08)}
.bb-embed-avatar-mini img{display:block;width:100%;height:100%;object-fit:contain;border-radius:18px}
.bb-embed-message-mini{font-size:22px;font-weight:900;line-height:1.15}
.bb-embed-finish-mini{text-align:center;margin-top:16px;font-size:24px;font-weight:900}

/* v2.4.4 – Quick Award bleibt nach dem Speichern bewusst sichtbar */
.bb-embed-app.is-awarded .bb-embed-actions-primary{
  display:none;
}
.bb-embed-app.is-awarded .bb-embed-goal:disabled{
  opacity:.72;
  cursor:default;
}
.bb-embed-success.is-visible{
  animation:bbEmbedReturnAppear .45s ease both;
}
@keyframes bbEmbedReturnAppear{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* v2.4.7 – Finale/MEGA-Moment zuverlässig im aktuellen Sichtfeld zentrieren.
   Die ältere Rebuild-Regel setzte das Overlay an den oberen Viewport-Rand;
   für den kindgerechten Abschlussmoment soll es stattdessen immer sofort
   mitten im aktuell sichtbaren Bereich erscheinen. */
.bb-finale-overlay.bb-show{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3vh, 28px) !important;
  overflow: auto !important;
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: none !important;
}
.bb-finale-overlay.bb-show .bb-finale-card{
  margin: auto !important;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}



/* v2.4.8 – Kompakter, wirklich wahrnehmbarer MEGA-Moment im Sichtfeld.
   Das Finale-Bild bleibt als Belohnung sichtbar, darf den eigentlichen
   Abschlussmoment aber nicht mehr nach oben aus dem Fokus drücken. */
.bb-finale-overlay.bb-show .bb-finale-card{
  width:min(720px, calc(100% - 28px)) !important;
  padding:clamp(16px, 2.5vh, 22px) clamp(16px, 2.2vw, 22px) !important;
  max-height:calc(100vh - 36px) !important;
  max-height:calc(100dvh - 36px) !important;
  overflow-y:auto !important;
}
.bb-finale-overlay.bb-show .bb-finale-emoji{
  font-size:clamp(42px, 6vh, 56px) !important;
  line-height:1 !important;
}
.bb-finale-overlay.bb-show .bb-finale-title{
  font-size:clamp(30px, 4.6vh, 38px) !important;
  margin-top:4px !important;
}
.bb-finale-overlay.bb-show .bb-finale-sub{
  margin:4px 0 10px !important;
}
.bb-finale-overlay.bb-show .bb-finale-img{
  width:100% !important;
  max-width:640px !important;
  max-height:min(36vh, 300px) !important;
  min-height:0 !important;
  margin:10px auto 14px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(248,251,255,.92) !important;
}
.bb-finale-overlay.bb-show .bb-finale-img img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:min(36vh, 300px) !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.bb-finale-overlay.bb-show .bb-finale-card .bb-btn{
  margin-top:2px !important;
}
@media (max-height:760px){
  .bb-finale-overlay.bb-show .bb-finale-card{
    width:min(660px, calc(100% - 24px)) !important;
    padding:14px 16px !important;
  }
  .bb-finale-overlay.bb-show .bb-finale-img{
    max-height:min(30vh, 220px) !important;
    margin:8px auto 10px !important;
  }
  .bb-finale-overlay.bb-show .bb-finale-img img{
    max-height:min(30vh, 220px) !important;
  }
}


/* v2.4.9 – Finale ohne Body-Transform: Die Feieranimation liegt nur noch auf der MEGA-Karte.
   Dadurch bleibt das Fixed-Overlay zuverlässig am aktuellen Viewport ausgerichtet. */
.bb-finale-overlay.bb-show .bb-finale-card{
  animation: bbFinaleCardPop .3s ease-out both;
}
@keyframes bbFinaleCardPop{
  from{ opacity:0; }
  to{ opacity:1; }
}


/* v2.5.0 – MEGA-Finale mit begleiterabhängigem Video.
   Die Testvideos liegen vorerst im Belohnungsmodul. Sie besitzen keinen echten Alpha-Kanal,
   daher wird das Video auf einer ruhigen, hellen Bühne eingebettet. */
.bb-finale-overlay.bb-show .bb-finale-media{
  width:100% !important;
  max-width:420px !important;
  min-height:0 !important;
  margin:10px auto 14px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:2px solid rgba(0,0,0,.05) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.14) !important;
  background:linear-gradient(180deg, rgba(253,253,252,.98), rgba(247,248,250,.98)) !important;
}
.bb-finale-overlay.bb-show .bb-finale-video-wrap{
  max-width:min(360px, 74vw) !important;
  max-height:min(52vh, 460px) !important;
  aspect-ratio:2 / 3 !important;
  background:#f7f7f4 !important;
}
.bb-finale-overlay.bb-show .bb-finale-video{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  background:#f7f7f4 !important;
  cursor:pointer;
}
.bb-finale-overlay.bb-show .bb-finale-video.bb-video-manual-play{
  outline:4px solid rgba(250,190,60,.38);
  outline-offset:-4px;
}
.bb-finale-overlay.bb-show .bb-finale-img{
  max-width:640px !important;
  max-height:min(36vh, 300px) !important;
  aspect-ratio:auto !important;
}
.bb-finale-overlay.bb-show .bb-finale-img img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:min(36vh, 300px) !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
@media (max-height:760px){
  .bb-finale-overlay.bb-show .bb-finale-video-wrap{
    max-width:min(280px, 58vw) !important;
    max-height:min(42vh, 330px) !important;
  }
}


/* v2.5.1 – Echter Quick-Award-Fortschritt im Embed */
.bb-embed-experience-real .bb-embed-scene-real{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  min-height:0;
  padding:18px;
}
.bb-embed-live-progress{
  position:relative;
  z-index:2;
  align-self:stretch;
  width:100%;
  max-width:520px;
  border-radius:18px;
  padding:10px 14px;
  background:rgba(255,255,255,.88);
  border:2px solid rgba(0,0,0,.06);
  font-size:18px;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.bb-embed-real-puzzle{
  position:relative;
  z-index:2;
  display:grid;
  width:min(100%, 520px);
  gap:2px;
  overflow:hidden;
  border-radius:22px;
  border:2px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.62);
  box-shadow:0 14px 36px rgba(0,0,0,.10);
}
.bb-embed-real-puzzle-cell{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:rgba(255,255,255,.86);
}
.bb-embed-real-puzzle-piece{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  opacity:var(--bb-embed-puzzle-preview, .10);
  transform:scale(1.01);
}
.bb-embed-real-puzzle-cover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,248,255,.96));
  font-size:28px;
  font-weight:900;
  color:#f7b63d;
  transition:opacity .35s ease, transform .35s ease;
}
.bb-embed-real-puzzle-cell.is-revealed .bb-embed-real-puzzle-piece{
  opacity:1;
}
.bb-embed-real-puzzle-cell.is-revealed .bb-embed-real-puzzle-cover{
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
}
.bb-embed-real-puzzle-cell.is-new{
  animation:bbEmbedRealReveal .9s cubic-bezier(.18,.9,.22,1) both;
  box-shadow:inset 0 0 0 4px rgba(255,199,69,.68);
  z-index:1;
}
@keyframes bbEmbedRealReveal{
  0%{transform:scale(.82) rotate(-1.2deg);filter:brightness(1.16);}
  65%{transform:scale(1.04);filter:brightness(1.08);}
  100%{transform:none;filter:none;}
}
.bb-embed-real-tower{
  position:relative;
  z-index:2;
  width:min(100%, 300px);
  max-height:380px;
  overflow:auto;
  padding:4px 4px 8px;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  scrollbar-width:thin;
}
.bb-embed-real-brick{
  min-height:clamp(28px, 4vw, 44px);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(22px, 4vw, 32px);
  font-weight:900;
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  background:#63c86d;
}
.bb-embed-real-brick.bb-color-1{background:#5dbaf3;}
.bb-embed-real-brick.bb-color-2{background:#c88cff;}
.bb-embed-real-brick.bb-color-3{background:#ffb94f;}
.bb-embed-real-brick.bb-color-4{background:#ee7fae;}
.bb-embed-real-brick.bb-color-5{background:#68cfc1;}
.bb-embed-real-brick.is-roof{
  border-radius:22px 22px 14px 14px;
  background:linear-gradient(135deg,#ffcf5c,#f6a33f);
}
.bb-embed-real-brick.is-new{
  animation:bbEmbedBrickDrop .9s cubic-bezier(.18,.9,.22,1) both;
  outline:4px solid rgba(255,199,69,.38);
  outline-offset:0;
}
@keyframes bbEmbedBrickDrop{
  from{opacity:0;transform:translateY(-90px) scale(.92);}
  70%{opacity:1;transform:translateY(8px) scale(1.03);}
  to{opacity:1;transform:none;}
}
.bb-embed-companion-real{
  width:min(100%, 520px);
}
.bb-embed-finale-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(12px, 3vh, 28px);
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(2px);
}
.bb-embed-finale-overlay.bb-show{
  display:flex;
}
.bb-embed-finale-card{
  width:min(640px, calc(100% - 24px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border-radius:28px;
  padding:clamp(16px, 2.5vh, 22px);
  text-align:center;
  background:#fff;
  border:2px solid rgba(0,0,0,.06);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  animation:bbFinaleCardPop .46s cubic-bezier(.2,.9,.2,1) both;
}
.bb-embed-finale-emoji{
  font-size:clamp(42px, 6vh, 56px);
  line-height:1;
}
.bb-embed-finale-title{
  margin-top:4px;
  font-size:clamp(30px, 4.6vh, 38px);
  font-weight:900;
  letter-spacing:.02em;
}
.bb-embed-finale-sub{
  margin:4px 0 10px;
  font-size:18px;
  font-weight:800;
}
.bb-embed-finale-media{
  width:100%;
  max-width:420px;
  min-height:0;
  margin:10px auto 14px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.05);
  box-shadow:0 18px 52px rgba(0,0,0,.14);
  background:linear-gradient(180deg, rgba(253,253,252,.98), rgba(247,248,250,.98));
}
.bb-embed-finale-media.is-video{
  max-width:min(360px, 74vw);
  max-height:min(52vh, 460px);
  aspect-ratio:2 / 3;
  background:#f7f7f4;
}
.bb-embed-finale-video{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:#f7f7f4;
  cursor:pointer;
}
.bb-embed-finale-video.bb-video-manual-play{
  outline:4px solid rgba(250,190,60,.38);
  outline-offset:-4px;
}
.bb-embed-finale-media.is-image img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:min(36vh, 300px);
  object-fit:contain;
  margin:0 auto;
}
.bb-embed-finale-media.is-fallback{
  min-height:180px;
  font-size:72px;
}
.bb-embed-finale-actions{
  margin-top:4px;
  display:flex;
  justify-content:center;
}
.bb-embed-finale-actions .bb-btn{
  min-width:220px;
}
@media (max-width:720px){
  .bb-embed-real-puzzle{
    width:100%;
  }
  .bb-embed-live-progress,
  .bb-embed-companion-real{
    max-width:100%;
  }
}
@media (max-height:760px){
  .bb-embed-finale-media.is-video{
    max-width:min(280px, 58vw);
    max-height:min(42vh, 330px);
  }
}


/* v2.5.1 final – Finale im Embed erst nach bewusstem Jubel-Klick */
.bb-embed-jubel-btn{
  background:linear-gradient(145deg,#f4b63f,#f08e2b) !important;
  color:#1f2430 !important;
  border:0 !important;
  box-shadow:0 12px 28px rgba(240,142,43,.22) !important;
}
.bb-embed-jubel-btn:hover{
  transform:translateY(-1px);
}

/* v2.6.0 – Gemeinsamer Belohnungsbereich im Embed.
   Der Embed nutzt dieselben .bb-puzzle/.bb-tower-Strukturen wie das Vollmodul,
   aber in einer kompakteren Bühne. */
.bb-embed-scene-shared{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  min-height:0;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg,#ffe0f2,#e7f4ff,#f7ffe3);
  overflow:hidden;
}
.bb-embed-shared-stage{
  width:min(100%, 620px);
  min-height:0 !important;
  margin:0 auto !important;
  background:rgba(255,255,255,.64) !important;
  border-radius:24px !important;
}
.bb-embed-shared-stage .bb-scene{
  padding:16px !important;
  min-height:0 !important;
}
.bb-embed-shared-stage .bb-puzzle{
  max-width:520px !important;
}
.bb-embed-shared-stage .bb-tower{
  max-width:520px !important;
}
.bb-embed-shared-stage .bb-tower-area{
  min-height:260px !important;
  padding:16px 16px 42px !important;
}
.bb-embed-shared-stage .bb-tower-brick{
  width:min(210px, 76vw) !important;
}
.bb-embed-shared-stage .bb-roof{
  width:min(216px, 78vw) !important;
}
/* Alte Vollmodul-Reveal-Animation im Embed nicht auf alle bereits sichtbaren Teile anwenden. */
.bb-embed-shared-stage .bb-puzzle-cell.bb-revealed{
  animation:none !important;
}
.bb-embed-shared-stage .bb-puzzle-cell.bb-just-revealed{
  animation:bbSharedEmbedPieceReveal .9s cubic-bezier(.18,.9,.22,1) both !important;
  box-shadow:inset 0 0 0 4px rgba(255,199,69,.68);
  z-index:2;
}
@keyframes bbSharedEmbedPieceReveal{
  0%{transform:scale(.84) rotate(-1.2deg);filter:brightness(1.18);}
  66%{transform:scale(1.035);filter:brightness(1.08);}
  100%{transform:none;filter:none;}
}
.bb-embed-shared-stage .bb-tower-brick.bb-just-added{
  animation:bbSharedEmbedBrickDrop .9s cubic-bezier(.18,.9,.22,1) both;
  outline:4px solid rgba(255,199,69,.38);
  outline-offset:0;
}
@keyframes bbSharedEmbedBrickDrop{
  from{opacity:0;transform:translateY(-90px) scale(.92);}
  70%{opacity:1;transform:translateY(8px) scale(1.03);}
  to{opacity:1;transform:none;}
}
@media (max-width:720px){
  .bb-embed-scene-shared{
    padding:14px;
  }
  .bb-embed-shared-stage{
    width:100%;
  }
  .bb-embed-shared-stage .bb-scene{
    padding:12px !important;
  }
  .bb-embed-shared-stage .bb-tower-area{
    min-height:220px !important;
  }
}


/* v2.6.3 – Schutzdialog bei Modus-/Zielwechsel mit vorhandenem Fortschritt */
.bb-confirm-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(24,31,45,.34);
  z-index:10020;
  padding:16px;
}
.bb-confirm-overlay.bb-show{display:flex;}
.bb-confirm-card{
  width:min(560px, calc(100% - 22px));
  background:#fff;
  border-radius:24px;
  border:2px solid rgba(0,0,0,.07);
  box-shadow:0 24px 80px rgba(0,0,0,.30);
  padding:22px;
}
.bb-confirm-title{
  font-weight:850;
  font-size:24px;
  line-height:1.15;
  margin-bottom:10px;
}
.bb-confirm-copy{
  font-weight:650;
  font-size:17px;
  line-height:1.45;
  opacity:.92;
}
.bb-confirm-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:18px;
}
@media (max-width: 640px){
  .bb-confirm-card{padding:18px;}
  .bb-confirm-title{font-size:21px;}
  .bb-confirm-copy{font-size:16px;}
  .bb-confirm-actions .bb-btn{width:100%; justify-content:center;}
}


/* v2.6.5 – Embed übernimmt den zusätzlichen unteren Abstand der Turmbühne ebenfalls. */


/* v2.7.0 – Gemeinsamer Experience-Polish für Hauptmodul und Embed */
.bb-puzzle-cell.bb-just-revealed{
  z-index:2;
  animation:bbSharedPieceCelebrate .92s cubic-bezier(.18,.9,.22,1) both;
  box-shadow:inset 0 0 0 4px rgba(255,199,69,.58), 0 0 0 2px rgba(255,255,255,.82);
}
@keyframes bbSharedPieceCelebrate{
  0%{transform:scale(.86) rotate(-1.4deg);filter:brightness(1.18);}
  64%{transform:scale(1.035);filter:brightness(1.08);}
  100%{transform:none;filter:none;}
}
.bb-tower-brick.bb-just-added{
  animation:bbSharedBrickCelebrate .92s cubic-bezier(.18,.9,.22,1) both;
  outline:4px solid rgba(255,199,69,.36);
  outline-offset:0;
}
@keyframes bbSharedBrickCelebrate{
  from{opacity:0;transform:translateY(-86px) scale(.94);}
  72%{opacity:1;transform:translateY(8px) scale(1.035);}
  to{opacity:1;transform:none;}
}
.bb-stage-feedback-pop{
  animation:bbRewardStageGlow 1.08s ease both;
}
@keyframes bbRewardStageGlow{
  0%{box-shadow:0 0 0 rgba(255,199,69,0);}
  45%{box-shadow:0 0 0 5px rgba(255,199,69,.20), 0 18px 42px rgba(255,199,69,.18);}
  100%{box-shadow:0 0 0 rgba(255,199,69,0);}
}
.bb-companion-card.bb-companion-feedback-pop,
.bb-embed-companion-mini.bb-companion-feedback-pop{
  animation:bbCompanionWarmPulse 1.08s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes bbCompanionWarmPulse{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,199,69,0);}
  48%{transform:translateY(-2px) scale(1.012);box-shadow:0 16px 34px rgba(255,199,69,.20);}
  100%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,199,69,0);}
}
.bb-embed-moment-label{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 14px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
  border:2px solid rgba(0,0,0,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.07);
  background:rgba(255,255,255,.92);
}
.bb-embed-moment-label.is-step{
  color:#5b4100;
  background:linear-gradient(145deg, rgba(255,248,221,.98), rgba(255,237,187,.94));
}
.bb-embed-moment-label.is-complete{
  color:#24461f;
  background:linear-gradient(145deg, rgba(234,255,225,.98), rgba(213,247,200,.94));
}
.bb-embed-scene-shared.is-complete{
  border:2px solid rgba(93,174,86,.18);
}

@media (max-width: 760px){
  .bb-help-grid{ grid-template-columns:1fr; }
  .bb-help-card{ padding:18px; }
  .bb-help-card h2{ font-size:22px; }
  .bb-help-strip{ width:100%; }
  .bb-help-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
  .bb-help-btn{ justify-content:center; }
}

/* Einheitliche Familymap-Modulorientierung */
.bb-help-strip{display:flex!important;width:100%!important;max-width:none!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:10px!important;margin:0 0 18px!important;border:1px solid rgba(48,111,104,.14)!important;border-radius:24px!important;background:rgba(255,255,255,.72)!important;box-shadow:0 10px 24px rgba(32,73,69,.07)!important}
.bb-help-strip__label{font-size:.95rem!important;font-weight:850!important}.bb-help-links a{padding:9px 14px!important;border-radius:999px!important;background:#fff!important;box-shadow:none!important}
@media(max-width:640px){.bb-help-strip{align-items:stretch!important;flex-direction:column!important}.bb-help-links{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.bb-help-links a{justify-content:center!important}}

/* Shared Familymap module header */
.bb-wrap {
  border-radius: 30px;
}
.bb-context-card {
  padding: 30px;
  border: 1px solid rgba(220, 207, 184, .72);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 224, 153, .28), transparent 34%),
    linear-gradient(145deg, #fffdf8 0%, #f2f9f6 100%);
  box-shadow: 0 16px 42px rgba(42, 76, 67, .07);
}
.bb-context-head,
.bb-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr);
  gap: 20px 28px;
  align-items: stretch;
}
.bb-context-head {
  margin: 0;
}
.bb-context-grid {
  margin-top: 18px;
}
.bb-module-title-wrap {
  justify-content: center;
}
.bb-module-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 7px 13px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: #335f58;
  background: rgba(219, 240, 232, .78);
  opacity: 1;
  font-weight: 850;
}
.bb-app-title {
  color: #1c2e3e;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
}
.bb-help-strip {
  margin: 20px 0 0 !important;
}
.bb-core-selector-wrap,
.bb-goal-focus-card,
.bb-companion-card,
.bb-child-badge {
  border: 1px solid rgba(220, 207, 184, .72);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(42, 76, 67, .06);
}
.bb-core-selector-wrap {
  min-width: 0;
  padding: 16px;
  border-radius: 22px;
}
.bb-context-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.bb-child-badge {
  width: auto;
  min-width: 150px;
  justify-content: center;
  border-radius: 22px;
}
.bb-goal-focus-card,
.bb-companion-card {
  border-radius: 22px;
}
.bb-companion-card {
  min-height: 132px;
}
@media (max-width: 980px) {
  .bb-context-head,
  .bb-context-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .bb-context-card {
    padding: 20px;
    border-radius: 24px;
  }
  .bb-context-main {
    grid-template-columns: 1fr;
  }
  .bb-child-badge {
    justify-content: flex-start;
  }
  .bb-help-strip {
    gap: 10px !important;
    padding: 10px !important;
  }
  .bb-help-links {
    gap: 8px !important;
  }
  .bb-help-btn {
    min-height: 42px;
    padding: 8px 10px !important;
    line-height: 1.1;
  }
}
.bb-public {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 18px 48px;
  color: #221c18;
}

.bb-public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 24px;
  align-items: stretch;
  padding: clamp(24px, 5vw, 46px);
  border-radius: 8px;
  border: 1px solid rgba(173, 99, 53, .2);
  background: linear-gradient(135deg, #fff8ed 0%, #f9f5ff 52%, #eff8f4 100%);
  box-shadow: 0 18px 44px rgba(83, 55, 35, .09);
}

.bb-public-kicker {
  display: block;
  margin-bottom: 10px;
  color: #a15b32;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bb-public h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.05;
}

.bb-public p {
  font-size: 1.02rem;
  line-height: 1.65;
}

.bb-public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.bb-public .bb-public-test-note {
  max-width: 620px;
  margin: 1.45rem 0 0;
  color: #60736a;
  font-size: .95rem;
  line-height: 1.5;
}

.bb-public-button,
.bb-public-overview {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(161, 91, 50, .32);
  color: #8a4c2a;
  font-weight: 800;
  text-decoration: none;
}

.bb-public-button--primary {
  background: #a15b32;
  color: #fff;
  border-color: #a15b32;
}

.bb-public-visual {
  display: grid;
  gap: 12px;
  align-content: center;
}

.bb-public-visual span {
  display: block;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  border-left: 5px solid #6b8d6b;
  font-weight: 800;
}

.bb-public-grid,
.bb-public-flow {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.bb-public-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-public-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.bb-public-grid article,
.bb-public-flow li {
  border: 1px solid rgba(173, 99, 53, .14);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(83, 55, 35, .06);
}

.bb-public-grid h2 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.bb-public-grid p {
  margin: 0;
  font-size: .96rem;
}

.bb-public-flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.bb-public-flow strong {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #a15b32;
  color: #fff;
  font-size: .9rem;
}

.bb-public-overview {
  margin-top: 18px;
  background: #fff;
}

@media (max-width: 820px) {
  .bb-public-hero,
  .bb-public-grid,
  .bb-public-flow {
    grid-template-columns: 1fr;
  }
}
.bb-public-promo {
  max-width: 560px;
  margin: 0 auto 20px;
}

.bb-public-promo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(30, 47, 42, .14);
}

/* Gefuehrter Arbeitsblick: mehr Orientierung, weniger visuelles Rauschen. */
.bb-wrap {
  border: 1.5px solid rgba(55, 88, 91, .12);
  background: linear-gradient(145deg, #fffaf2 0%, #eef8f5 58%, #faf4ff 100%);
}

.bb-context-card,
.bb-stage-card {
  border: 1.5px solid rgba(55, 88, 91, .15);
  box-shadow: 0 16px 36px rgba(40, 65, 69, .09);
}

.bb-context-card {
  padding: 22px;
}

.bb-context-head,
.bb-context-grid {
  gap: 14px 18px;
}

.bb-help-strip {
  width: auto !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px !important;
  margin: 12px 0 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .84) !important;
  border-color: rgba(55, 88, 91, .15) !important;
}

.bb-help-strip__label {
  white-space: nowrap !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.bb-help-links {
  width: auto !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.bb-help-btn {
  min-height: 34px;
  padding: 7px 10px !important;
  font-size: 13px !important;
}

.bb-core-selector-wrap,
.bb-goal-focus-card,
.bb-companion-card,
.bb-progress-wrap {
  border: 1.5px solid rgba(55, 88, 91, .14);
  box-shadow: 0 10px 24px rgba(40, 65, 69, .065);
}

.bb-start-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 18px 20px;
  border: 1.5px solid rgba(73, 124, 110, .24);
  border-left: 7px solid #287061;
  border-radius: 20px;
  background: linear-gradient(135deg, #f7fbf8 0%, #fff8eb 100%);
  box-shadow: 0 14px 30px rgba(38, 75, 67, .1);
}

.bb-start-focus-copy {
  display: grid;
  gap: 6px;
  align-content: center;
}

.bb-start-focus-copy span {
  color: #287061;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bb-start-focus-copy strong {
  color: #243f3d;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.12;
}

.bb-start-focus-copy p {
  max-width: 760px;
  margin: 0;
  color: #526a66;
  font-size: 15px;
  line-height: 1.55;
}

.bb-start-focus-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.bb-start-focus-steps a {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid rgba(40, 112, 97, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  color: #244743;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bb-start-focus-steps a:hover,
.bb-start-focus-steps a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(40, 112, 97, .42);
  box-shadow: 0 10px 22px rgba(40, 65, 69, .08);
}

.bb-start-focus-steps span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #287061;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.bb-start-focus-steps strong {
  color: inherit;
  font-size: 14px;
  line-height: 1.25;
}

.bb-stage-card {
  border-left: 7px solid #f0b35e;
  background: rgba(255, 255, 255, .88);
}

.bb-stage-hint {
  white-space: normal;
  border-radius: 18px;
}

.bb-stage {
  min-height: 520px;
  border: 1.5px solid rgba(55, 88, 91, .14);
}

@media (min-width: 761px) and (max-width: 980px) {
  .bb-context-head,
  .bb-context-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr) !important;
  }

  .bb-start-focus {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr);
  }

  .bb-companion-stage {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
  }

  .bb-companion-card {
    padding: 12px;
  }

  .bb-stage {
    min-height: 500px;
  }
}

@media (max-width: 760px) {
  .bb-context-card {
    padding: 16px;
  }

  .bb-start-focus {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .bb-start-focus-copy strong {
    font-size: 24px;
  }

  .bb-stage-card {
    border-left-width: 0;
    border-top: 7px solid #f0b35e;
  }
}

/* v2.8.0 - ruhiger Arbeitsfokus, geschuetzte Verwaltung und einfache Einstellungen */
.bb-wrap {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bb-context-card,
.bb-stage-card,
.bb-start-focus,
.bb-core-selector-wrap,
.bb-goal-focus-card,
.bb-companion-card,
.bb-progress-wrap,
.bb-stage,
.bb-modal-card,
.bb-settings-section {
  border-radius: 8px;
}

.bb-context-main,
.bb-goal,
.bb-goal-focus-card {
  min-width: 0;
}

.bb-goal-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.bb-start-focus-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-start-focus-steps a.is-primary {
  grid-column: 1 / -1;
  border-color: #287061;
  color: #fff;
  background: #287061;
  box-shadow: 0 10px 22px rgba(40, 112, 97, .18);
}

.bb-start-focus-steps a:not(.is-primary) {
  display: flex;
  justify-content: center;
  text-align: center;
}

.bb-actions {
  align-items: center;
}

.bb-settings-btn {
  color: #fff;
  background: #287061;
}

.bb-management {
  position: relative;
}

.bb-management > summary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid rgba(55, 88, 91, .22);
  border-radius: 8px;
  color: #405b57;
  background: #fff;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.bb-management > summary::-webkit-details-marker {
  display: none;
}

.bb-management-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(330px, 82vw);
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(55, 88, 91, .18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(40, 65, 69, .16);
}

.bb-management-menu .bb-btn {
  width: 100%;
  border: 1px solid rgba(151, 76, 65, .2);
  border-radius: 8px;
  color: #7a3d35;
  background: #fff8f6;
  text-align: left;
}

.bb-advanced-settings {
  margin-top: 12px;
  border: 1px solid rgba(31, 109, 138, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.bb-advanced-settings > summary {
  padding: 14px 16px;
  color: #315b68;
  font-weight: 800;
  cursor: pointer;
}

.bb-advanced-settings__content {
  padding: 0 12px 12px;
}

.bb-advanced-settings .bb-settings-section {
  box-shadow: none;
}

.bb-m-save {
  color: #fff;
  background: #287061;
}

.bb-puzzle {
  max-width: 820px;
}

.bb-stage {
  min-height: 460px;
}

.bb-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.bb-final-success-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 1px solid #287061;
  border-radius: 8px;
  color: #287061;
  background: #fff;
  font-weight: 800;
  text-decoration: none;
}

.bb-final-success-link[hidden] {
  display: none;
}

@media (min-width: 761px) and (max-width: 980px) {
  .bb-context-grid {
    grid-template-columns: 1fr !important;
  }

  .bb-companion-card {
    min-height: 112px;
  }
}

@media (max-width: 760px) {
  .bb-start-focus-steps {
    grid-template-columns: 1fr;
  }

  .bb-start-focus-steps a.is-primary {
    grid-column: auto;
  }

  .bb-management-menu {
    position: static;
    margin-top: 8px;
  }
}