/* v1.2 – modern, phone-first, shorter stage */
:root{ --brand:#1f7a56; --brand-600:#166247; --ink:#0e1116; --muted:#6b7280; --bg:#f7faf8; --card:#fff; }
.cbx{color:var(--ink)}
.cbx *{box-sizing:border-box}

/* Wizard layout */
.cbx-wizard{min-height:64vh;display:grid;grid-template-rows:auto 1fr auto auto;gap:10px}
.cbx-crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:4px 0;overflow:auto}
.cbx-crumb{border:1px solid #d7eee2;background:#edf7f1;color:#0f4d37;border-radius:999px;padding:.3rem .6rem;font-weight:700;cursor:pointer;white-space:nowrap;font-size:.92rem}
.cbx-stage{display:grid;place-items:center;padding:.8rem;background:var(--bg);border:1px solid #e5efe8;border-radius:14px;min-height:42vh}
.cbx-q{max-width:820px;margin:auto;text-align:left;animation:fadeIn .22s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cbx-q h2{font-size:clamp(1.35rem,4vw,2.1rem);line-height:1.18;margin:.15rem 0 .4rem;font-weight:800}
.cbx-q .cbx-sub{color:var(--muted);font-size:clamp(.98rem,2.3vw,1.06rem);margin:-.15rem 0 .8rem}
.cbx-field{margin:.4rem 0 .8rem}
.cbx-input{font-size:clamp(1.05rem,3vw,1.22rem);padding:.8rem .9rem;border-radius:12px;border:1px solid #d1d5db;width:100%}
.cbx-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem}
.cbx-chip{appearance:none;border:1px solid #d1d5db;background:#fff;color:var(--ink);padding:.6rem .95rem;border-radius:999px;font-weight:700;cursor:pointer;font-size:1rem}
.cbx-chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.cbx-controls{display:flex;justify-content:space-between;gap:.5rem}
.cbx-btn{appearance:none;border:1px solid #d1d5db;background:#fff;color:var(--ink);padding:.65rem .95rem;border-radius:999px;font-weight:800;cursor:pointer}
.cbx-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.cbx-btn:focus, .cbx-chip:focus, .cbx-input:focus{outline:3px solid rgba(31,122,86,.32);outline-offset:2px}
.cbx-progress{height:7px;background:#e8f3ec;border-radius:999px;overflow:hidden}
.cbx-progress .cbx-bar{display:block;height:100%;background:var(--brand);width:0%}

/* Results layout */
.cbx-results{display:grid;gap:10px}
@media (min-width:900px){ .cbx-results{grid-template-columns: 320px minmax(0,1fr);} }
.cbx-filters{background:var(--card);border:1px solid #e5e7eb;border-radius:14px;padding:12px}
@media (min-width:900px){ .cbx-filters{position:sticky; top:80px;} }
.cbx-filter-field{margin:.4rem 0}
.cbx-filter-field label{display:block;font-weight:800;margin-bottom:.25rem}
.cbx-filter-field input, .cbx-filter-field select{width:100%;padding:.55rem .7rem;border:1px solid #d1d5db;border-radius:10px}
.cbx-filter-actions{display:flex;gap:.5rem;margin-top:.4rem}
.cbx-deck-stage{min-height:58vh}
.cbx-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.4rem}
.cbx-answers{display:flex;gap:.5rem;flex-wrap:wrap}
.cbx-answer{border:1px solid #d7eee2;background:#edf7f1;color:#0f4d37;border-radius:999px;padding:.35rem .65rem;font-weight:800;cursor:pointer;white-space:nowrap}
.cbx-answer:hover{filter:brightness(.98)}
.cbx-answer[data-editing="1"]{background:#fff;border-color:#bfe8d3}
.cbx-answer input, .cbx-answer select{margin-left:.5rem;min-width:140px;border:1px solid #d1d5db;border-radius:10px;padding:.25rem .4rem}

/* Deck */
#cbx-deck{position:relative;min-height:420px}
.cbx-card{position:absolute;inset:0;margin:auto;max-width:980px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:12px 12px 14px;box-shadow:0 2px 10px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.06);display:grid;grid-template-rows:auto 1fr auto;gap:.55rem;transform-origin:50% 90%;touch-action:none}
.cbx-card:nth-child(1){z-index:5}
.cbx-card:nth-child(2){transform:translateY(8px) scale(.996);opacity:.98;z-index:4}
.cbx-card:nth-child(3){transform:translateY(14px) scale(.992);opacity:.95;z-index:3}
.cbx-card h3{margin:.15rem 0 .05rem;font-size:clamp(1.12rem,2.1vw,1.45rem)}
.cbx-badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}
.cbx-badge{background:#edf7f1;border:1px solid #d7eee2;color:#0f4d37;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700}
.cbx-summary{color:#1f2937;line-height:1.45;max-width:75ch}
.cbx-row{color:#2b3037;margin:.12rem 0}
.cbx-ctas{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.cbx-cta{padding:.5rem .8rem;border-radius:12px;border:1px solid #d1d5db;background:#fff;font-weight:800;text-decoration:none}
.cbx-cta.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.cbx-actions-deck{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.25rem}
.cbx-vote{display:flex;gap:.45rem}
.cbx-btn-deck{font-size:1rem;padding:.6rem .9rem;border-radius:12px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-weight:700}
.cbx-btn-deck.yes{background:#e8faf0;border-color:#c8ecd8;color:#0f5132}
.cbx-btn-deck.no{background:#fff5f5;border-color:#f1d0d0;color:#842029}
.cbx-card:focus{outline:4px solid rgba(31,122,86,.35);outline-offset:2px}

/* Smaller mobile deck height */
@media (max-width: 420px){
  .cbx-wizard{min-height:58vh}
  .cbx-stage{min-height:38vh}
  #cbx-deck{min-height:380px}
}


/* === Anpassungen in assets/wizard-pro.css === */

/* Filter links: feste linke Spalte, kein Vollhöhen-Stretch */
.cbx-results{display:grid;gap:16px}
@media (min-width:900px){
  .cbx-results{grid-template-columns:300px minmax(0,1fr);}
}

/* Panel nur so hoch wie Inhalt + max. 70% opak, leicht transparent */
.cbx-filters{
  align-self:start;                /* verhindert Strecken über die gesamte Höhe */
  background:rgba(255,255,255,.7); /* ≤ 70% Deckkraft */
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
  backdrop-filter:saturate(1.1) blur(2px);
}

/* Antworten-Chips kleiner und in eine Zeile (Desktop) */
.cbx-answers{
  display:flex;
  gap:.3rem;
  flex-wrap:nowrap;   /* eine Zeile */
  overflow:auto;      /* bei Überlänge scrollbar */
  padding-bottom:.2rem;
}
.cbx-answer{
  font-size:.86rem;
  padding:.22rem .5rem;
}

/* Überschrift der Ergebnisse etwas kleiner */
.cbx-h3{margin:.12rem 0;font-size:clamp(1rem,1.8vw,1.2rem);font-weight:800}

/* Chancencheck-Bereich zentrieren, stärker in den Fokus */
.cbx-deck-stage{min-height:52vh;max-width:920px;margin:0 auto}

/* Mobile: Chips dürfen umbrechen */
@media (max-width:700px){
  .cbx-answers{flex-wrap:wrap}
}

/* === Ergänzung ans ENDE von assets/wizard-pro.css (fix für Karten-Layout & lange Titel) === */

/* Karte: Höhe begrenzen, Überlauf innerhalb scrollen lassen */
.cbx-card{
  overflow:hidden;
  max-height:78vh;                 /* iPad/Desktop */
}
@media (max-width:900px){
  .cbx-card{ max-height:72vh; }    /* Handy/kleinere Tablets */
}

/* Inhaltsteil der Karte (Body) darf scrollen, Buttons bleiben sichtbar */
.cbx-card .cbx-body{
  overflow:auto;
  padding-right:4px;               /* verhindert Scrollbar-Überdeckung */
}

/* Lange Titel/Zeilen umbrechen, ästhetisch trennen */
.cbx-card h3{
  word-break:break-word;
  hyphens:auto;
}

/* Zusammenfassung: auf 3 Zeilen begrenzen, sauber abschneiden */
.cbx-summary{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

/* CTA-Buttons sauber umbrechen/füllen */
.cbx-ctas{ flex-wrap:wrap; }
.cbx-ctas .cbx-cta{
  flex:1 1 auto;
  text-align:center;
  min-width:12rem;
}
@media (max-width:600px){
  .cbx-ctas{ flex-direction:column; }
  .cbx-ctas .cbx-cta{ width:100%; min-width:0; }
}

/* Actions-Leiste stets sichtbar, verhindert Überlagern mit Text unten */
.cbx-actions-deck{
  position:sticky;
  bottom:0;
  background:linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,.6) 60%, transparent);
  padding-top:.25rem;
}

/* etwas Luft unter dem Deck, damit nichts mit dem Footer kollidiert */
#cbx-deck{ padding-bottom:24px; }


/* === assets/wizard-pro.css — NUR ChancenCheck-Deck anpassen === */

/* Deck-Container: feste Höhe, zentriert, verhindert Überlagerung mit Folgebereichen */
#cbx-deck{
  position: relative;
  height: clamp(440px, 62vh, 680px);
  max-width: 920px;
  margin: 0 auto 48px; /* Abstand nach unten, damit nichts überlappt */
  overflow: visible;
  z-index: 0;
}

/* Karten-Stack: nur oberste Karte klickbar, untere rein optisch */
.cbx-card{ 
  position: absolute; inset: 0;
  margin: 0 auto;
  max-width: 920px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto; /* Header | Body | Footer */
  overflow: hidden;
  max-height: 72vh;
}
.cbx-card:nth-child(1){ z-index: 5; pointer-events:auto; }
.cbx-card:nth-child(n+2){ pointer-events:none; } /* verhindert versehentliche Klicks */

/* Body der Karte scrollt intern, Texte kleiner & umbruchfest */
.cbx-card .cbx-body{ overflow:auto; padding-right:4px; }
.cbx-card > div:nth-of-type(2){ overflow:auto; padding-right:4px; } /* Fallback */

.cbx-card h3{
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.2;
  margin:.1rem 0 .2rem;
  word-break: break-word; hyphens: auto;
}
.cbx-summary{ font-size:.95rem; line-height:1.38; margin:.2rem 0 .3rem; }
.cbx-row{ font-size:.92rem; line-height:1.35; margin:.08rem 0; }
.cbx-badge{ font-size:.72rem; padding:.08rem .42rem; }

/* CTAs kompakt und umbrechbar */
.cbx-ctas{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.25rem; }
.cbx-cta{ font-size:.9rem; padding:.42rem .68rem; border-radius:10px; flex:0 1 auto; text-align:center; max-width:100%; }
@media (max-width:700px){ .cbx-ctas{ flex-direction:column; } .cbx-cta{ width:100%; } }

/* Actions unten – kein Sticky, damit nichts überlappt */
.cbx-actions-deck{
  position: relative;
  background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.7) 60%, transparent);
  padding-top:.25rem; margin-top:.1rem;
}
.cbx-btn-deck{ font-size:.9rem; padding:.48rem .72rem; border-radius:10px; white-space:nowrap; }

/* iPad/kleinere Screens: Karte etwas niedriger & Typo kleiner */
@media (max-width:1024px){
  .cbx-card{ max-height: 66vh; }
  .cbx-card h3{ font-size: clamp(0.92rem, 1.8vw, 1.08rem); }
  .cbx-summary{ font-size: .92rem; }
  .cbx-row, .cbx-btn-deck, .cbx-cta{ font-size: .88rem; }
}