/* ============================================================================
 * Component: camp-theme-3d-design (0.340.0) — the look of /feriencamp/3d-design/ (activity 24143), «Schicht für Schicht».
 * Motif from the owner's picture (a green rocket from the 3D printer): printing layer by layer. Hero: light sky-blue with
 * faint layer lines, eyebrow in filament green ink. Section: the rocket prints while the steps light up. Filament green and
 * blue are decoration only (variables); every action stays ROBBO green.
 * ========================================================================= */
.rc-camp-landing[data-activity-id="24143"],
.rc-3d {
    --d3-sky: #EEF5FB;
    --d3-sky-2: #F9FBFE;
    --d3-fil: #3CC34A;
    --d3-fil-dark: #24983A;
    --d3-ink: #1F6B2A;
    --d3-blue: #6E9BD6;
    --d3-steel: #C9D2DC;
}
.rc-camp-landing[data-activity-id="24143"] .rc-comp-hero {
    background: linear-gradient(180deg, var(--d3-sky-2) 0%, var(--d3-sky) 100%) !important;
}
.rc-camp-landing[data-activity-id="24143"] .rc-comp-hero-confetti { display: none; }
.rc-camp-landing[data-activity-id="24143"] .rc-comp-hero-eyebrow {
    background: var(--robbo-white) !important;
    border: 1px solid color-mix(in srgb, var(--d3-fil) 40%, transparent) !important;
    color: var(--d3-ink) !important;
}
.rc-camp-landing[data-activity-id="24143"] .rc-comp-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--d3-blue) 9%, transparent) 0 2px, transparent 2px 12px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
@media (max-width: 767px) {
    .rc-camp-landing[data-activity-id="24143"] .rc-comp-hero-media--illustration { max-width: 220px; }
}

.rc-3d {
    padding: 48px 16px 56px;
    background: linear-gradient(180deg, var(--d3-sky) 0%, var(--robbo-white) 45%);
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    color: var(--robbo-coal);
}
.rc-3d *, .rc-3d *::before, .rc-3d *::after { box-sizing: border-box; }
.rc-3d-wrap { max-width: 1000px; margin: 0 auto; }
.rc-3d-head { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.rc-3d-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--robbo-white);
    border: 1px solid color-mix(in srgb, var(--d3-fil) 40%, transparent);
    font-size: var(--robbo-fs-badge);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--d3-ink);
}
.rc-3d-h2 { margin: 12px 0 10px; font-family: 'Plakkaat', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--robbo-black); }
.rc-3d-lead { margin: 0; font-size: var(--robbo-fs-base); line-height: 1.6; }

.rc-3d-lab {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 22px 18px 24px;
    border-radius: 24px;
    background: var(--robbo-white);
    border: 1px solid var(--robbo-line);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--robbo-coal) 8%, transparent);
}
.rc-3d-print { margin: 0 auto; width: 100%; max-width: 200px; }
.rc-3d-svg { display: block; width: 100%; height: auto; }
.rc-3d-bed { fill: var(--d3-steel); }
.rc-3d-ghost path { fill: none; stroke: color-mix(in srgb, var(--d3-fil) 45%, transparent); stroke-width: 2; stroke-dasharray: 5 5; }
.rc-3d-rocket path { fill: var(--d3-fil); }
.rc-3d-window { fill: var(--robbo-white); stroke: var(--d3-fil-dark); stroke-width: 4; }
.rc-3d-layer { fill: color-mix(in srgb, var(--robbo-black) 7%, transparent); }
.rc-3d-head-nozzle { fill: var(--robbo-coal); }
/* Printing (camp-theme-3d-design.js): the clip rectangle rises from the bed, the nozzle rides on the printed edge. */

.rc-3d-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc-3d-step { display: flex; gap: 12px; align-items: flex-start; font-size: var(--robbo-fs-base); line-height: 1.55; transition: opacity 0.4s ease; }
.rc-3d-t { color: var(--robbo-black); }
.rc-3d-n {
    flex: 0 0 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--d3-fil);
    color: var(--robbo-black);
    font-size: var(--robbo-fs-md);
    font-weight: 800;
}
.rc-3d-lab.is-armed .rc-3d-step { opacity: 0.35; }
.rc-3d-lab.is-armed.is-printing .rc-3d-step { animation: rc-3d-on 0.4s ease forwards; animation-delay: calc(var(--d3-i) * 1.1s + 0.3s); }
@keyframes rc-3d-on { to { opacity: 1; } }
/* «Wie aus einer Datei ein Objekt wird» (0.344.0) */
.rc-3d-how { margin: 26px auto 0; max-width: 860px; }
.rc-3d-h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--robbo-black); text-align: center; }
.rc-3d-how-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: d3how; }
.rc-3d-how-list li {
    position: relative;
    padding: 12px 14px 12px 50px;
    border-radius: 12px;
    background: var(--robbo-white);
    border: 1px solid var(--robbo-line);
    font-size: var(--robbo-fs-base);
    line-height: 1.5;
    color: var(--robbo-coal);
}
.rc-3d-how-list li::before {
    counter-increment: d3how;
    content: counter(d3how);
    position: absolute;
    left: 14px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--robbo-green);
    color: var(--robbo-white);
    font-weight: 800;
    font-size: var(--robbo-fs-md);
    line-height: 26px;
    text-align: center;
}
.rc-3d-how-list strong { color: var(--robbo-black); }
@media (min-width: 900px) {
    .rc-3d-how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rc-3d-day { margin: 22px auto 0; max-width: 760px; font-size: var(--robbo-fs-base); line-height: 1.6; text-align: center; }
.rc-3d-day a { font-weight: 700; color: var(--robbo-green-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 760px) {
    .rc-3d-lab { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding: 30px 36px; }
}
@media (min-width: 1024px) {
    .rc-3d { padding: 64px 32px 72px; }
    .rc-3d-h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .rc-3d-lab.is-armed .rc-3d-step { opacity: 1; animation: none; }
}