/* Brandvisory · Value Proposition Generator
   Gleiche Tokens wie /blog/blog.css. Wirkt auf der Tool-Seite und eingebettet im Blogartikel (.post__body). */
.vpg {
  --v-navy: var(--navy, #0C1B3F); --v-navy2: var(--navy2, #152650); --v-ice: var(--ice, #CFE7F1); --v-lemon: var(--lemon, #D8F94B);
  --v-paper: var(--paper, #FCF9FB); --v-paper2: var(--paper2, #F0EDF2); --v-muted: var(--muted, #6B7A9F); --v-text2: #3a4768; --v-hint: #4b5878;
  --v-ok: #1d6b45; --v-tip: #8a5300; --v-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --v-display: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  container-type: inline-size; container-name: vpg;
  position: relative; display: block; margin: 36px 0; background: #fff; color: var(--v-navy);
  border: 1.5px solid var(--v-paper2); border-radius: 24px; overflow: hidden;
  box-shadow: 0 28px 70px -48px rgba(12, 27, 63, .55);
  font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif); font-size: 16px; line-height: 1.55; text-align: left;
}
.vpg *, .vpg *::before, .vpg *::after { box-sizing: border-box; }
.vpg p, .vpg ol, .vpg ul { margin: 0; }
.vpg ol, .vpg ul { padding: 0; list-style: none; }
.vpg li { margin: 0; }
.vpg a { text-decoration: none; font-weight: inherit; }
.vpg button { font: inherit; color: inherit; }
.vpg svg { flex: none; }
.vpg :focus-visible { outline: 2px solid var(--v-navy); outline-offset: 2px; }
.vpg .vpg-top :focus-visible, .vpg .vpg-card--core :focus-visible, .vpg .vpg-cta :focus-visible { outline-color: var(--v-lemon); }
.vpg .vpg-sr, .vpg-offscreen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; left: -9999px; }
.vpg-loading { padding: 32px; color: var(--v-muted); }

/* ---------- Kopf ---------- */
.vpg .vpg-top { position: relative; background: var(--v-navy); color: #fff; padding: 24px 24px 0; }
.vpg .vpg-top__corner { position: absolute; top: 12px; left: 12px; color: var(--v-lemon); line-height: 0; }
.vpg .vpg-top__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-bottom: 18px; }
.vpg .vpg-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--v-ice); margin: 0 0 4px; }
.vpg .vpg-h { font-family: var(--v-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.vpg .vpg-modes { display: inline-flex; padding: 4px; gap: 4px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(207, 231, 241, .2); border-radius: 99px; }
.vpg .vpg-modes[hidden], .vpg .vpg-dots[hidden] { display: none; }
.vpg .vpg-mode { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 99px; cursor: pointer; transition: background .25s var(--v-ease), color .25s; }
.vpg .vpg-mode svg { width: 18px; height: 18px; }
.vpg .vpg-mode:hover { color: #fff; }
.vpg .vpg-mode[aria-pressed="true"] { background: var(--v-lemon); color: var(--v-navy); }
.vpg .vpg-dots { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 14px; scrollbar-width: none; }
.vpg .vpg-dots::-webkit-scrollbar { display: none; }
.vpg .vpg-dot { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid rgba(207, 231, 241, .18); background: transparent; color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 500; padding: 5px 11px 5px 5px; border-radius: 99px; cursor: pointer; transition: all .25s var(--v-ease); }
.vpg .vpg-dot:hover { color: #fff; border-color: rgba(207, 231, 241, .45); }
.vpg .vpg-dot__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700; }
.vpg .vpg-dot__n svg { width: 13px; height: 13px; }
.vpg .vpg-dot.is-done .vpg-dot__n { background: var(--v-ice); color: var(--v-navy); }
.vpg .vpg-dot.is-current { color: var(--v-navy); background: var(--v-lemon); border-color: var(--v-lemon); }
.vpg .vpg-dot.is-current .vpg-dot__n { background: var(--v-navy); color: var(--v-lemon); }
.vpg .vpg-progress { height: 4px; margin: 0 -24px; background: rgba(255, 255, 255, .12); }
.vpg .vpg-progress__bar { display: block; height: 100%; width: 0; background: var(--v-lemon); transition: width .6s var(--v-ease); }

/* ---------- Gemeinsame Bausteine ---------- */
.vpg .vpg-q { font-family: var(--v-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; }
.vpg .vpg-q:focus { outline: none; }
.vpg .vpg-stepno { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v-muted); margin: 0 0 6px; }
.vpg .vpg-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--v-muted); margin: 0 0 10px; }
.vpg .vpg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 99px; border: 1.5px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--v-ease), background .2s, border-color .2s, color .2s, box-shadow .2s; }
.vpg .vpg-btn:hover { transform: translateY(-1px); }
.vpg .vpg-btn:active { transform: translateY(0); }
.vpg .vpg-btn--primary { background: var(--v-navy); color: #fff; }
.vpg .vpg-btn--primary:hover { background: var(--v-navy2); box-shadow: 0 10px 24px -14px rgba(12, 27, 63, .7); }
.vpg .vpg-btn--lemon { background: var(--v-lemon); color: var(--v-navy); }
.vpg .vpg-btn--lemon:hover { background: #e8ff6b; }
.vpg .vpg-btn--ghost { background: #fff; color: var(--v-navy); border-color: rgba(12, 27, 63, .16); }
.vpg .vpg-btn--ghost:hover { border-color: var(--v-navy); }
.vpg .vpg-btn--soft { background: rgba(216, 249, 75, .38); color: var(--v-navy); }
.vpg .vpg-btn--soft:hover { background: var(--v-lemon); }
.vpg .vpg-btn--text { background: transparent; color: var(--v-hint); padding-left: 10px; padding-right: 10px; }
.vpg .vpg-btn--text:hover { color: var(--v-navy); }
.vpg .vpg-btn.is-done { background: var(--v-ok); border-color: var(--v-ok); color: #fff; }
.vpg .vpg-note { display: flex; gap: 10px; align-items: flex-start; background: rgba(216, 249, 75, .28); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; margin: 0 0 16px; color: var(--v-navy); }
.vpg .vpg-note svg { margin-top: 2px; }

/* ---------- Einstieg ---------- */
.vpg .vpg-intro { display: grid; gap: 24px; padding: 28px 24px 30px; }
.vpg .vpg-intro__lead { color: var(--v-text2); margin: 0 0 22px; max-width: 560px; }
.vpg .vpg-choice { display: grid; gap: 12px; }
.vpg .vpg-opt { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; text-align: left; width: 100%; background: #fff; border: 1.5px solid var(--v-paper2); border-radius: 20px; padding: 20px; cursor: pointer;
  transition: transform .3s var(--v-ease), border-color .3s, box-shadow .3s; }
.vpg .vpg-opt:hover { transform: translateY(-3px); border-color: var(--v-navy); box-shadow: 0 16px 40px -24px rgba(12, 27, 63, .35); }
.vpg .vpg-opt__icon { grid-row: span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--v-ice); color: var(--v-navy); }
.vpg .vpg-opt__title { font-family: var(--v-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.vpg .vpg-opt__desc { color: var(--v-text2); font-size: 15px; }
.vpg .vpg-opt__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-top: 6px; }
.vpg .vpg-opt__go svg { transition: transform .25s var(--v-ease); }
.vpg .vpg-opt:hover .vpg-opt__go svg { transform: translateX(4px); }
.vpg .vpg-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 14px; color: var(--v-hint); }
.vpg .vpg-facts li { display: inline-flex; align-items: center; gap: 6px; }
.vpg .vpg-facts svg { width: 15px; height: 15px; color: var(--v-navy); }
.vpg .vpg-intro__art { display: none; }

/* ---------- Schritt ---------- */
.vpg .vpg-main { display: grid; }
.vpg .vpg-stage { padding: 26px 24px 24px; min-width: 0; }
.vpg .vpg-coach { display: flex; gap: 12px; align-items: flex-start; background: var(--v-paper); border: 1px solid var(--v-paper2); border-radius: 16px; padding: 14px 16px; margin: 0 0 8px; }
.vpg .vpg-coach__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--v-navy); color: var(--v-lemon); }
.vpg .vpg-coach__body { min-width: 0; }
.vpg .vpg-coach__q { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--v-muted); margin: 0 0 2px; }
.vpg .vpg-coach__text { font-size: 15px; color: var(--v-text2); animation: vpg-fade .45s var(--v-ease) both; }
.vpg .vpg-coach__src { font-size: 12.5px; color: var(--v-muted); margin-top: 6px; animation: vpg-fade .45s var(--v-ease) .1s both; }
.vpg .vpg-coach__dots { display: none; gap: 5px; padding: 8px 0 4px; }
.vpg .vpg-coach__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--v-navy); animation: vpg-dots 1s infinite ease-in-out; }
.vpg .vpg-coach__dots i:nth-child(2) { animation-delay: .15s; }
.vpg .vpg-coach__dots i:nth-child(3) { animation-delay: .3s; }
.vpg .vpg-coach.is-typing .vpg-coach__dots { display: flex; }
.vpg .vpg-coach.is-typing .vpg-coach__text, .vpg .vpg-coach.is-typing .vpg-coach__src { display: none; }

.vpg .vpg-field { margin-top: 22px; }
.vpg .vpg-label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--v-muted); margin: 0 0 6px; }
.vpg .vpg-sentence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--v-display); font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.vpg .vpg-frame { color: var(--v-navy); }
.vpg .vpg-inwrap { flex: 1 1 320px; min-width: 0; display: flex; align-items: baseline; gap: 4px; }
.vpg .vpg-frame--after { flex: none; }
.vpg .vpg-input { flex: 1 1 auto; min-width: 0; width: 100%; font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif); font-size: 17px; font-weight: 500; color: var(--v-navy);
  background: #fff; border: 0; border-bottom: 2.5px solid var(--v-navy); border-radius: 8px 8px 0 0; padding: 8px 10px 7px; transition: background-color .25s, border-color .25s, box-shadow .25s; }
.vpg .vpg-input::placeholder { color: #8a95b3; font-weight: 400; }
.vpg .vpg-input:hover { background: var(--v-paper); }
.vpg .vpg-input:focus { outline: none; background: rgba(216, 249, 75, .2); border-bottom-color: var(--v-navy); box-shadow: 0 3px 0 0 var(--v-lemon); }
.vpg .vpg-input.is-typing { caret-color: transparent; background: rgba(216, 249, 75, .2); }
.vpg .vpg-hint { font-size: 14px; color: var(--v-hint); margin: 8px 0 0; }
.vpg .vpg-fb { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; font-weight: 600; margin: 6px 0 0; min-height: 21px; }
.vpg .vpg-fb svg { width: 17px; height: 17px; margin-top: 1px; }
.vpg .vpg-fb.is-empty { color: var(--v-muted); font-weight: 500; }
.vpg .vpg-fb.is-ok { color: var(--v-ok); }
.vpg .vpg-fb.is-tip { color: var(--v-tip); }
.vpg .vpg-fb span { animation: vpg-fade .3s var(--v-ease) both; }
.vpg .vpg-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vpg .vpg-nav [data-act="next"] { margin-left: auto; }
.vpg .vpg-exnote { font-size: 12.5px; color: var(--v-muted); margin-top: 12px; }

/* Seitenleiste: Live-Vorschau + Canvas */
.vpg .vpg-side { display: grid; gap: 14px; align-content: start; background: var(--v-paper); border-top: 1.5px solid var(--v-paper2); padding: 22px 24px 24px; }
.vpg .vpg-preview, .vpg .vpg-map { background: #fff; border: 1px solid var(--v-paper2); border-radius: 16px; padding: 16px 18px; }
.vpg .vpg-statement { font-size: 16.5px; line-height: 1.75; color: var(--v-navy); }
.vpg .vpg-slot { border-radius: 6px; padding: 2px 5px; background: rgba(207, 231, 241, .55); box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .3s; }
.vpg .vpg-slot.is-empty { background: transparent; color: var(--v-muted); font-style: italic; border: 1.5px dashed rgba(12, 27, 63, .22); padding: 0 6px; }
.vpg .vpg-slot.is-active { background: rgba(216, 249, 75, .6); }
.vpg .vpg-slot.is-active.is-empty { background: rgba(216, 249, 75, .25); border-color: var(--v-navy); color: var(--v-navy); animation: vpg-gap 1.6s ease-in-out infinite; }
.vpg .vpg-slot.is-new { animation: vpg-pop .7s var(--v-ease); }
.vpg .vpg-count { font-size: 12.5px; color: var(--v-muted); margin-top: 10px; }
.vpg .vpg-map__cap { font-size: 13px; color: var(--v-hint); margin-top: 6px; }
.vpg .vpg-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--v-hint); }
.vpg .vpg-privacy svg { margin-top: 2px; }

/* Value Proposition Canvas */
.vpg .vpg-canvas { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: visible; }
.vpg .vpg-seg { fill: #fff; stroke: var(--v-navy); stroke-width: 1.4; transition: fill .45s var(--v-ease); }
.vpg .vpg-seg.is-done { fill: var(--v-lemon); }
.vpg .vpg-seg.is-active { animation: vpg-pulse 1.8s ease-in-out infinite; }
.vpg .vpg-ring { fill: none; stroke: rgba(12, 27, 63, .25); stroke-width: 1.4; stroke-dasharray: 3 4; transition: stroke .3s; }
.vpg .vpg-ring.is-done { stroke: var(--v-navy); stroke-dasharray: none; }
.vpg .vpg-ring.is-active { stroke: var(--v-navy); stroke-width: 3; animation: vpg-ring 1.8s ease-in-out infinite; }
.vpg .vpg-fit path { fill: none; stroke: rgba(12, 27, 63, .3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.vpg .vpg-fit.is-done path { stroke: var(--v-navy); }
.vpg .vpg-fit.is-active path { stroke: var(--v-navy); animation: vpg-nudge 1.4s ease-in-out infinite; }
.vpg .vpg-lbl { font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif); font-size: 10.5px; font-weight: 700; fill: var(--v-navy); pointer-events: none; }
.vpg .vpg-lbl--fit { font-size: 10px; fill: var(--v-muted); }
.vpg .vpg-ttl { font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--v-muted); }
/* Einstieg: der Canvas „füllt sich“ nacheinander */
.vpg .vpg-canvas.is-tour .vpg-seg { animation: vpg-tour 7s ease-in-out infinite; }
.vpg .vpg-canvas.is-tour [data-seg="pains"] { animation-delay: .9s; }
.vpg .vpg-canvas.is-tour [data-seg="gains"] { animation-delay: 1.8s; }
.vpg .vpg-canvas.is-tour [data-seg="offer"] { animation-delay: 2.7s; }
.vpg .vpg-canvas.is-tour [data-seg="relief"] { animation-delay: 3.6s; }
.vpg .vpg-canvas.is-tour [data-seg="create"] { animation-delay: 4.5s; }
.vpg .vpg-canvas.is-tour .vpg-ring { stroke: var(--v-navy); stroke-dasharray: none; }
.vpg .vpg-canvas.is-tour .vpg-fit path { stroke: var(--v-navy); animation: vpg-nudge 1.4s ease-in-out infinite; }

/* ---------- Ergebnis ---------- */
.vpg .vpg-result { padding: 26px 24px 28px; }
.vpg .vpg-result__head { display: grid; gap: 18px; align-items: center; margin-bottom: 22px; }
.vpg .vpg-result__lead { color: var(--v-text2); margin: 0 0 12px; }
.vpg .vpg-score { position: relative; display: grid; place-items: center; width: 124px; height: 124px; }
.vpg .vpg-score svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vpg .vpg-score__track { fill: none; stroke: var(--v-paper2); stroke-width: 9; }
.vpg .vpg-score__bar { fill: none; stroke: var(--v-navy); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--v-ease), stroke .3s; }
.vpg .vpg-score__bar.is-high { stroke: #8fc31f; }
.vpg .vpg-score__bar.is-mid { stroke: #e2b100; }
.vpg .vpg-score__bar.is-low { stroke: #e0703a; }
.vpg .vpg-score__num { font-family: var(--v-display); font-weight: 800; font-size: 34px; line-height: 1; margin-top: -10px; }
.vpg .vpg-score__lbl { position: absolute; bottom: 30px; font-size: 12px; font-weight: 700; color: var(--v-hint); }
.vpg .vpg-cards { display: grid; gap: 14px; }
.vpg .vpg-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1.5px solid var(--v-paper2); border-radius: 18px; padding: 18px 20px; animation: vpg-rise .5s var(--v-ease) both; }
.vpg .vpg-card:nth-child(2) { animation-delay: .06s; } .vpg .vpg-card:nth-child(3) { animation-delay: .12s; }
.vpg .vpg-card:nth-child(4) { animation-delay: .18s; } .vpg .vpg-card:nth-child(5) { animation-delay: .24s; }
.vpg .vpg-card__title { font-family: var(--v-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.vpg .vpg-card__sub { font-size: 13px; color: var(--v-muted); margin-bottom: 6px; }
.vpg .vpg-card__headline { font-family: var(--v-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
.vpg .vpg-card__text { font-size: 16px; line-height: 1.65; color: var(--v-navy); }
.vpg .vpg-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.vpg .vpg-card__meta { font-size: 12.5px; color: var(--v-muted); }
.vpg .vpg-card__btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vpg .vpg-card.is-over .vpg-card__meta { color: #b4441b; font-weight: 600; }
.vpg .vpg-card.is-swap .vpg-card__text { animation: vpg-fade .45s var(--v-ease); }
.vpg .vpg-mini { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(12, 27, 63, .16); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.vpg .vpg-mini svg { width: 15px; height: 15px; }
.vpg .vpg-mini:hover { border-color: var(--v-navy); }
.vpg .vpg-mini.is-done { background: var(--v-ok); border-color: var(--v-ok); color: #fff; }
.vpg mark { color: inherit; }
.vpg .vpg-v { background: linear-gradient(transparent 60%, rgba(216, 249, 75, .75) 60%, rgba(216, 249, 75, .75) 92%, transparent 92%); padding: 0 1px; }
.vpg .vpg-gap { background: rgba(224, 112, 58, .14); border: 1px dashed #e0703a; border-radius: 5px; padding: 0 5px; font-style: italic; }
.vpg .vpg-card--core { background: var(--v-navy); border-color: var(--v-navy); color: #fff; position: relative; overflow: hidden; }
.vpg .vpg-card--core::after { content: ''; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border-right: 3px solid var(--v-lemon); border-bottom: 3px solid var(--v-lemon); opacity: .55; pointer-events: none; }
.vpg .vpg-card--core .vpg-card__sub, .vpg .vpg-card--core .vpg-card__meta { color: rgba(255, 255, 255, .7); }
.vpg .vpg-card--core .vpg-card__text { color: #fff; font-family: var(--v-display); font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.vpg .vpg-card--core .vpg-v { background: linear-gradient(transparent 62%, rgba(216, 249, 75, .45) 62%, rgba(216, 249, 75, .45) 94%, transparent 94%); }
.vpg .vpg-card--core .vpg-mini { background: transparent; color: #fff; border-color: rgba(207, 231, 241, .35); position: relative; z-index: 1; }
.vpg .vpg-card--core .vpg-mini:hover { border-color: var(--v-lemon); color: var(--v-lemon); }
.vpg .vpg-card--core .vpg-mini.is-done { background: var(--v-lemon); color: var(--v-navy); border-color: var(--v-lemon); }

.vpg .vpg-check { margin-top: 18px; border: 1.5px solid var(--v-paper2); border-radius: 18px; padding: 18px 20px; }
.vpg .vpg-check li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--v-paper2); font-size: 15px; }
.vpg .vpg-check li:first-child { border-top: 0; }
.vpg .vpg-check__i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; }
.vpg .vpg-check__i svg { width: 15px; height: 15px; }
.vpg .vpg-check li.is-ok .vpg-check__i { background: var(--v-lemon); color: var(--v-navy); }
.vpg .vpg-check li.is-tip .vpg-check__i { background: #fdecc8; color: var(--v-tip); }
.vpg .vpg-check__t { flex: 1; padding-top: 1px; }
.vpg .vpg-link { border: 0; background: none; padding: 1px 0; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--v-lemon); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.vpg .vpg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vpg .vpg-tests { margin-top: 22px; background: var(--v-paper); border-radius: 18px; padding: 18px 20px; }
.vpg .vpg-tests ol { counter-reset: vt; display: grid; gap: 8px; }
.vpg .vpg-tests li { counter-increment: vt; position: relative; padding-left: 34px; font-size: 15px; color: var(--v-text2); }
.vpg .vpg-tests li::before { content: counter(vt); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--v-navy); color: var(--v-lemon); font-size: 12px; font-weight: 700; }
.vpg .vpg-tests b { color: var(--v-navy); }
.vpg .vpg-cta { position: relative; overflow: hidden; margin-top: 22px; background: var(--v-navy); color: #fff; border-radius: 20px; padding: 28px 24px; }
.vpg .vpg-cta::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-right: 3px solid var(--v-lemon); border-bottom: 3px solid var(--v-lemon); opacity: .6; pointer-events: none; }
.vpg .vpg-cta__title { font-family: var(--v-display); font-weight: 800; font-size: 24px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; max-width: 520px; }
.vpg .vpg-cta__text { color: rgba(255, 255, 255, .78); margin: 0 0 18px; max-width: 540px; font-size: 15.5px; }
.vpg .vpg-cta .vpg-btn { position: relative; z-index: 1; }

/* ---------- Animationen ---------- */
.vpg .vpg-in-next { animation: vpg-in-next .45s var(--v-ease) both; }
.vpg .vpg-in-prev { animation: vpg-in-prev .45s var(--v-ease) both; }
@keyframes vpg-in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes vpg-in-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes vpg-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes vpg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vpg-dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes vpg-pop { 0% { background-color: rgba(216, 249, 75, .2); } 30% { background-color: var(--v-lemon); box-shadow: 0 0 0 3px rgba(216, 249, 75, .55); } 100% { background-color: rgba(207, 231, 241, .55); box-shadow: 0 0 0 0 rgba(216, 249, 75, 0); } }
@keyframes vpg-gap { 0%, 100% { background-color: rgba(216, 249, 75, .12); } 50% { background-color: rgba(216, 249, 75, .55); } }
@keyframes vpg-pulse { 0%, 100% { fill: var(--v-ice); } 50% { fill: #eefbb5; } }
@keyframes vpg-ring { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
@keyframes vpg-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes vpg-tour { 0%, 8% { fill: #fff; } 18%, 70% { fill: var(--v-lemon); } 82%, 100% { fill: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .vpg *, .vpg *::before, .vpg *::after { animation: none !important; transition: none !important; }
  .vpg .vpg-canvas.is-tour .vpg-seg { fill: var(--v-lemon); }
}

/* ---------- Breitere Container (Tool-Seite, Tablet/Desktop) ---------- */
@container vpg (min-width: 560px) {
  .vpg .vpg-top { padding: 26px 30px 0; }
  .vpg .vpg-progress { margin: 0 -30px; }
  .vpg .vpg-intro, .vpg .vpg-stage, .vpg .vpg-result { padding-left: 30px; padding-right: 30px; }
  .vpg .vpg-side { padding-left: 30px; padding-right: 30px; }
  .vpg .vpg-choice { grid-template-columns: 1fr 1fr; }
  .vpg .vpg-opt { grid-template-columns: 1fr; padding: 22px; }
  .vpg .vpg-opt__icon { grid-row: auto; margin-bottom: 10px; }
  .vpg .vpg-result__head { grid-template-columns: 1fr auto; }
  .vpg .vpg-q { font-size: 28px; }
}
@container vpg (min-width: 900px) {
  .vpg .vpg-h { font-size: 28px; }
  .vpg .vpg-intro { grid-template-columns: 1.25fr .75fr; align-items: center; gap: 40px; padding: 36px 36px 38px; }
  .vpg .vpg-intro__art { display: block; }
  .vpg .vpg-main { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  .vpg .vpg-stage { padding: 32px 36px; }
  .vpg .vpg-side { border-top: 0; border-left: 1.5px solid var(--v-paper2); padding: 32px 28px; }
  .vpg .vpg-side > * { position: relative; }
  .vpg .vpg-result { padding: 32px 36px 36px; }
  .vpg .vpg-cards { grid-template-columns: 1fr 1fr; }
  .vpg .vpg-card--core, .vpg .vpg-card[data-card="pitch"], .vpg .vpg-card[data-card="social"] { grid-column: 1 / -1; }
  .vpg .vpg-q { font-size: 30px; }
}
@container vpg (max-width: 699px) {
  .vpg .vpg-dot:not(.is-current) .vpg-dot__t { display: none; }
  .vpg .vpg-dot:not(.is-current) { padding-right: 5px; }
}
@container vpg (max-width: 420px) {
  .vpg .vpg-sentence { font-size: 19px; }
  .vpg .vpg-nav .vpg-btn { flex: 1 1 auto; }
  .vpg .vpg-nav [data-act="next"] { flex-basis: 100%; order: -1; margin-left: 0; }
  .vpg .vpg-actions .vpg-btn { flex: 1 1 100%; }
  .vpg .vpg-mode span { display: none; }
  .vpg .vpg-mode { padding: 8px 12px; }
}

/* ---------- Tool-Seite ---------- */
.vpgp-hero { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 56px 32px 8px; }
.vpgp-hero .crumbs { margin-bottom: 28px; }
.vpgp-title { font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 800; font-size: clamp(38px, 6vw, 72px); line-height: 1.03; letter-spacing: -.03em; margin: 0 0 20px; }
.vpgp-title em { font-style: normal; background: linear-gradient(transparent 62%, var(--lemon, #D8F94B) 62%, var(--lemon, #D8F94B) 92%, transparent 92%); }
.vpgp-lead { max-width: 720px; font-size: 19px; color: #3a4768; margin: 0; }
.vpgp-tool { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 8px 32px 24px; }
.vpgp-tool .vpg { margin: 24px 0 8px; }
.vpgp-info { padding-top: 24px; }
.vpgp-steps { counter-reset: st; list-style: none; padding: 0 !important; }
.vpgp-steps li { counter-increment: st; position: relative; padding-left: 44px; margin: 14px 0 !important; }
.vpgp-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy, #0C1B3F); color: var(--lemon, #D8F94B); font-weight: 700; font-size: 14px; }
@media (max-width: 960px) {
  .vpgp-hero { padding: 36px 16px 4px; }
  .vpgp-tool { padding: 4px 16px 16px; }
  .vpgp-lead { font-size: 18px; }
}