/* ==========================================================================
   BLOXXY – Seitenspezifische Ergänzungen (Toy Box 2026)
   Für: testlizenz.html, testlizenz-erfolg.html, Rechtsseiten, Ratgeber.
   Wird nach styles.css geladen und nutzt ausschließlich dessen --bx-*-Tokens.

   KOMPONENTEN
   ol.form-steps > li.form-step(.is-current|.is-done) > .form-step-num + .form-step-label
       Fortschrittsanzeige (Testlizenz, Erfolgsseite); aktiver Schritt mit aria-current="step"
   .form-card                Formularkarte mit Bausteinleiste oben
   .success-head > .success-hero (.confetti-1…6, img.success-mascot, .success-icon)
       feierlicher, ruhiger Kopf der Erfolgsseite (statisch, keine Bewegung)
   .legal-layout > nav.legal-toc (.legal-toc-title + ol) + .legal-text
       Rechtsseiten mit Inhaltsverzeichnis (ab 1100 px als mitlaufende Seitenleiste)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fortschrittsanzeige
   -------------------------------------------------------------------------- */
.form-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    counter-reset: none;
}
.form-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bx-ink-3);
}
/* Verbindungslinie zum vorherigen Schritt */
.form-step + .form-step::before {
    content: "";
    position: absolute;
    top: 17px;
    right: calc(50% + 26px);
    left: calc(-50% + 26px);
    height: 4px;
    border-radius: 4px;
    background: var(--bx-line-strong);
}
.form-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--bx-line-strong), 0 var(--bx-depth) 0 var(--bx-line);
    font-family: var(--bx-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--bx-ink-3);
}
.form-step.is-current { color: var(--bx-ink); }
.form-step.is-current .form-step-num {
    background: var(--bx-accent-strong);
    color: #fff;
    box-shadow: 0 var(--bx-depth) 0 var(--bx-accent-ink);
}
.form-step.is-done { color: var(--bx-ink-2); }
.form-step.is-done .form-step-num {
    background: var(--bx-func-deep);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 var(--bx-depth) 0 #054A33;
}
.form-step.is-done + .form-step::before { background: var(--bx-func); }

/* --------------------------------------------------------------------------
   Formularkarte (Testlizenz)
   -------------------------------------------------------------------------- */
.form-card {
    position: relative;
    overflow: hidden;
}
/* schmale Bausteinleiste in den vier Befehlsfarben */
.form-card::before,
.success-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--bx-move) 0 25%, var(--bx-turn) 25% 50%, var(--bx-jump) 50% 75%, var(--bx-func) 75% 100%);
}
.success-card { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   Erfolgsseite: feierlich, aber ruhig
   -------------------------------------------------------------------------- */
.success-head h1 { margin-top: 4px; }
.success-hero {
    position: relative;
    width: 220px;
    height: 150px;
    margin: 0 auto 12px;
}
.success-mascot {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 104px;
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 10px rgba(30, 34, 64, .16));
}
.success-hero .success-icon {
    position: absolute;
    left: calc(50% + 26px);
    bottom: 4px;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 16px;
    font-size: 22px;
    background: var(--bx-func-deep);
    box-shadow: 0 var(--bx-depth) 0 #054A33, 0 0 0 4px var(--bx-bg);
}
.confetti {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 6px;
}
.confetti-1 { top: 18px; left: 18px; background: var(--bx-move); box-shadow: 0 2px 0 var(--bx-move-deep); transform: rotate(-14deg); }
.confetti-2 { top: 66px; left: 0; width: 12px; height: 12px; border-radius: 4px; background: var(--bx-star); box-shadow: 0 2px 0 var(--bx-star-deep); transform: rotate(18deg); }
.confetti-3 { top: 4px; left: 72px; width: 12px; height: 12px; border-radius: 4px; background: var(--bx-func); box-shadow: 0 2px 0 var(--bx-func-deep); transform: rotate(10deg); }
.confetti-4 { top: 10px; right: 30px; background: var(--bx-turn); box-shadow: 0 2px 0 var(--bx-turn-deep); transform: rotate(12deg); }
.confetti-5 { top: 70px; right: 2px; width: 14px; height: 14px; border-radius: 5px; background: var(--bx-jump); box-shadow: 0 2px 0 var(--bx-jump-deep); transform: rotate(-20deg); }
.confetti-6 { top: 0; right: 84px; width: 10px; height: 10px; border-radius: 3px; background: var(--bx-accent); box-shadow: 0 2px 0 var(--bx-accent-strong); }

@media (prefers-reduced-motion: no-preference) {
    .success-hero .confetti,
    .success-hero .success-icon { animation: pg-pop .5s var(--bx-ease) both; }
    .success-hero .success-icon { animation-delay: .15s; }
    .success-hero .confetti:nth-child(even) { animation-delay: .08s; }
}
@keyframes pg-pop {
    from { opacity: 0; scale: .6; }
    to { opacity: 1; scale: 1; }
}

.success-card .notice { margin-top: 6px; }
.success-card .next-steps-title { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Rechtsseiten: Inhaltsverzeichnis + angenehme Zeilenlänge
   -------------------------------------------------------------------------- */
.legal-toc {
    margin-bottom: 24px;
    padding: 22px 24px;
    border-radius: var(--bx-radius-lg);
    background: var(--bx-surface-2);
    box-shadow: inset 0 2px 0 var(--bx-line);
}
.legal-toc-title {
    font-family: var(--bx-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--bx-ink);
    margin-bottom: 10px;
}
.legal-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    font-size: 15px;
    line-height: 1.4;
}
.legal-toc a {
    display: block;
    padding: 5px 10px;
    border-radius: var(--bx-radius-xs);
    color: var(--bx-ink-2);
    font-weight: 600;
    text-decoration: none;
}
.legal-toc a:hover { background: #fff; color: var(--bx-accent-deep); text-decoration: underline; }

/* Textspalte max. 760 px → ca. 70–78 Zeichen pro Zeile */
.legal-container { max-width: calc(760px + 2 * var(--gutter)); }
.legal-text { font-size: 17px; }
.legal-text h2 { scroll-margin-top: calc(var(--nav-h) + 20px); }

@media (min-width: 1100px) {
    .legal-container:has(.legal-layout) { max-width: calc(1072px + 2 * var(--gutter)); }
    .legal-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 760px);
        gap: 32px;
        align-items: start;
    }
    .legal-toc {
        position: sticky;
        top: calc(var(--nav-h) + 20px);
        max-height: calc(100vh - var(--nav-h) - 40px);
        overflow-y: auto;
        margin-bottom: 0;
        padding: 18px 10px 18px 12px;
        scrollbar-width: thin;
        scrollbar-color: var(--bx-line-strong) transparent;
    }
    .legal-toc-title { padding-left: 10px; margin-bottom: 6px; font-size: 17px; }
    .legal-toc ol { gap: 0; font-size: 14px; line-height: 1.35; }
    .legal-toc a { padding: 5px 10px; }
}

/* --------------------------------------------------------------------------
   Ratgeber: Inhaltsverzeichnis mit Baustein-Nummern
   -------------------------------------------------------------------------- */
.prose .toc ol { list-style: none; padding-left: 0; counter-reset: toc; }
.prose .toc li { counter-increment: toc; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; }
.prose .toc li::before {
    content: counter(toc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--bx-line-strong);
    font-family: var(--bx-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--bx-accent-deep);
    transform: translateY(-1px);
}
.prose .toc a { color: var(--bx-ink-2); }
.prose .toc a:hover { color: var(--bx-accent-deep); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .form-steps { margin-bottom: 20px; }
    .form-step { font-size: 13px; }
    .legal-text { font-size: 16px; }
    .legal-toc { padding: 18px 16px; }
    .success-hero { transform: scale(.9); margin-bottom: 4px; }
}

/* Ratgeber: lange Titel füllen die Zeilen statt drei schmaler, „balancierter“ Zeilen */
.article-hero h1 { text-wrap: pretty; }