/* ============================================================================
   V4 page "Einstieg" (W13, webapp-v4/seiten/13, mockup prefix einstieg-).
   Page additions on top of v4.css, all scoped under .bl-v4 (V4 shell only).
   ========================================================================= */

/* Grid: steps left, progress + support right. Phone: progress, steps, support. */
.bl-v4 .bl-gs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.bl-v4 .bl-gs-main { grid-column: 1; grid-row: 1; min-width: 0; }
.bl-v4 .bl-gs-aside { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 32px; margin-top: 44px; min-width: 0; }
.bl-v4 .bl-gs-card { overflow: hidden; }

/* Progress (old view: hero with the ring) */
.bl-v4 .bl-gs-hero { display: flex; flex-direction: column; }
.bl-v4 .bl-gs-hero-title { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.bl-v4 .bl-gs-hero-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.bl-v4 .bl-gs-hero .bl-progress { margin-top: 20px; }
.bl-v4 .bl-gs-hero .bl-progress-top strong { font-variant-numeric: tabular-nums; }
.bl-v4 .bl-gs-pct { font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.bl-v4 .bl-gs-next { margin-top: 20px; width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }
.bl-v4 .bl-gs-next-note { margin-top: 8px; text-align: center; }
.bl-v4 .bl-gs-done-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 999px; background: var(--good-soft); color: var(--good); }
.bl-v4 .bl-gs-done-ic .bl-gs-tick { width: 14px; height: 7px; margin-top: -4px; border-width: 0 0 2.5px 2.5px; }

/* Steps: one card with rows */
.bl-v4 .bl-gs-list { padding: 0 24px; }
.bl-v4 .bl-gs-step { display: block; padding: 0; scroll-margin-top: 24px; transition: background-color .4s ease; }
.bl-v4 .bl-gs-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; }
.bl-v4 .bl-gs-text { min-width: 0; }
.bl-v4 .bl-gs-side { display: flex; align-items: center; gap: 10px; }
.bl-v4 .bl-gs-tick { display: block; width: 10px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* done: collapsible */
.bl-v4 .bl-gs-done > summary { list-style: none; cursor: pointer; }
.bl-v4 .bl-gs-done > summary::-webkit-details-marker { display: none; }
.bl-v4 .bl-gs-done > summary:hover .bl-step-title { color: var(--ink-2); }
.bl-v4 .bl-gs-chev { color: var(--muted-2); transition: transform .15s ease; }
.bl-v4 .bl-gs-done[open] .bl-gs-chev { transform: rotate(180deg); }
.bl-v4 .bl-gs-benefit { margin: -6px 0 0 46px; padding-bottom: 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.bl-v4 .bl-gs-benefit .bl-link { margin-left: 4px; }

/* current */
.bl-v4 .bl-gs-step.bl-is-current { margin: 0 -24px; padding: 0 24px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.bl-v4 .bl-gs-step.bl-is-current + .bl-gs-step { border-top-color: var(--accent-line); }
.bl-v4 .bl-gs-step.bl-is-current .bl-gs-row { grid-template-columns: 32px minmax(0, 1fr); align-items: start; padding: 20px 0; }
.bl-v4 .bl-gs-step.bl-is-current .bl-step-dot { background: var(--surface); font-variant-numeric: tabular-nums; }
/* "Schritt N: …" jumps to the row (#gs-step-N) and lights it up briefly */
.bl-v4 .bl-gs-step:target { animation: bl-gs-flash 1s ease; }
@keyframes bl-gs-flash { 0%, 40% { background-color: var(--accent-soft); } }
.bl-v4 .bl-gs-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; }
.bl-v4 .bl-gs-title-row .bl-step-title { font-size: 15px; color: var(--ink); }
.bl-v4 .bl-gs-body { margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.bl-v4 .bl-gs-tip { margin-top: 12px; padding: 10px 12px; font-size: 13px; }
.bl-v4 .bl-gs-tip > .bl-ic { margin-top: 1px; }
.bl-v4 .bl-gs-tip strong { color: var(--ink); }
.bl-v4 .bl-gs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.bl-v4 .bl-gs-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bl-v4 .bl-gs-copied { font-size: 12.5px; font-weight: 600; color: var(--good); }

/* locked */
.bl-v4 .bl-gs-step.bl-is-locked .bl-step-dot { border-style: dashed; color: var(--muted-2); background: var(--surface-2); }
.bl-v4 .bl-gs-step.bl-is-locked .bl-step-title { color: var(--muted); font-weight: 600; }
.bl-v4 .bl-gs-step.bl-is-locked .bl-step-sub { color: var(--muted-2); }
.bl-v4 .bl-gs-lock-tag { background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; }

/* Support */
.bl-v4 .bl-gs-support { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
.bl-v4 .bl-gs-support-head { display: flex; align-items: center; gap: 12px; }
.bl-v4 .bl-gs-support-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.bl-v4 .bl-gs-support-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.bl-v4 .bl-gs-support-sub { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1023.98px) {
  .bl-v4 .bl-gs-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bl-v4 .bl-gs-aside { display: contents; margin-top: 0; }
  .bl-v4 .bl-gs-hero { order: 0; padding: 20px; }
  .bl-v4 .bl-gs-main { grid-column: 1; grid-row: auto; order: 1; margin-top: 32px; }
  .bl-v4 .bl-gs-support { order: 2; margin-top: 16px; }
  .bl-v4 .bl-gs-hero-title { font-size: 19px; }
  .bl-v4 .bl-gs-next { min-height: 44px; }
  .bl-v4 .bl-gs-list { padding: 0 16px; }
  .bl-v4 .bl-gs-step.bl-is-current { margin: 0 -16px; padding: 0 16px; }
  .bl-v4 .bl-gs-row { gap: 12px; }
  .bl-v4 .bl-gs-step.bl-is-locked .bl-gs-row { grid-template-columns: 32px minmax(0, 1fr); }
  .bl-v4 .bl-gs-step.bl-is-locked .bl-gs-side { grid-column: 2; margin-top: -6px; }
  .bl-v4 .bl-gs-done .bl-status { display: none; }
  .bl-v4 .bl-gs-benefit { margin-left: 44px; }
  .bl-v4 .bl-gs-actions .bl-btn { height: 44px; }
  .bl-v4 .bl-gs-actions > .bl-btn:first-child,
  .bl-v4 .bl-gs-copy { flex: 1 1 auto; }
  .bl-v4 .bl-gs-actions > .bl-btn:first-child,
  .bl-v4 .bl-gs-copy .bl-btn { justify-content: center; }
  .bl-v4 .bl-gs-support .bl-btn { width: 100%; justify-content: center; height: 44px; }
  .bl-v4 .bl-gs-main .bl-zone-head .bl-link { font-size: 13px; }
}