/* ============================================================================
 * Component: camp-theme-otto-robot (0.331.0) — the look of /feriencamp/otto-robot/ (activity 17212) and «Die Otto-Woche».
 * Motif from the owner's hero (a girl carrying a green-and-white Otto; a servo and shell parts on the floor): the robot
 * that comes out of a box of parts. Hero: mint with faint circuit-board traces (Otto's Arduino), eyebrow in servo blue.
 * Section: the week as a build log with a filling build bar, and Otto drawn like the hero's with its parts numbered.
 * Otto green, servo blue and mint are decoration only (variables); every action stays ROBBO green.
 * ========================================================================= */
.rc-camp-landing[data-activity-id="17212"],
.rc-ot {
    --ot-mint: #EEF8F0;
    --ot-mint-2: #F8FCF8;
    --ot-green: #3DB85A;
    --ot-green-top: #63CC7B;
    --ot-blue: #2F55C4;
    --ot-blue-soft: #EAF0FD;
    --ot-steel: #D9DEE3;
    --ot-ink: #23272B;
    --ot-pcb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M10 40h60l20 20h60M150 60v50l20 20h40M30 120h40l20-20M90 100v80M90 180h60l20 20M10 200h50M180 20v20M120 10v30'/%3E%3Ccircle cx='10' cy='40' r='4' fill='%23000'/%3E%3Ccircle cx='210' cy='130' r='4' fill='%23000'/%3E%3Ccircle cx='30' cy='120' r='4' fill='%23000'/%3E%3Ccircle cx='170' cy='200' r='4' fill='%23000'/%3E%3Ccircle cx='60' cy='200' r='4' fill='%23000'/%3E%3Ccircle cx='180' cy='20' r='4' fill='%23000'/%3E%3Ccircle cx='120' cy='10' r='4' fill='%23000'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- hero --- */
.rc-camp-landing[data-activity-id="17212"] .rc-comp-hero {
    background: linear-gradient(180deg, var(--ot-mint-2) 0%, var(--ot-mint) 100%) !important;
}
.rc-camp-landing[data-activity-id="17212"] .rc-comp-hero-confetti { display: none; }
.rc-camp-landing[data-activity-id="17212"] .rc-comp-hero-eyebrow {
    background: var(--robbo-white) !important;
    border: 1px solid color-mix(in srgb, var(--ot-blue) 28%, transparent) !important;
    color: var(--ot-blue) !important;
}
/* Faint circuit-board traces behind the picture. */
.rc-camp-landing[data-activity-id="17212"] .rc-comp-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ot-green);
    opacity: 0.14;
    -webkit-mask-image: var(--ot-pcb);
    mask-image: var(--ot-pcb);
    -webkit-mask-size: 220px 220px;
    mask-size: 220px 220px;
}
@media (max-width: 767px) {
    .rc-camp-landing[data-activity-id="17212"] .rc-comp-hero-media--illustration { max-width: 210px; }
}
@media (min-width: 768px) {
    .rc-camp-landing[data-activity-id="17212"] .rc-comp-hero-bg::before { left: 52%; }
}

/* ---------------------------------------------------------- section --- */
.rc-ot {
    padding: 48px 16px 56px;
    background: linear-gradient(180deg, var(--ot-mint) 0%, var(--robbo-white) 46%);
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    color: var(--robbo-coal);
}
.rc-ot *, .rc-ot *::before, .rc-ot *::after { box-sizing: border-box; }
.rc-ot-wrap { max-width: 1120px; margin: 0 auto; }
.rc-ot-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.rc-ot-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--robbo-white);
    border: 1px solid color-mix(in srgb, var(--ot-blue) 28%, transparent);
    font-size: var(--robbo-fs-badge);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ot-blue);
}
.rc-ot-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-ot-lead { margin: 0; font-size: var(--robbo-fs-base); line-height: 1.6; }

/* Build log: tabs Mo–Fr, the build bar, one day at a time (all days stacked without JS). */
.rc-ot-log { max-width: 1040px; margin: 0 auto; }
.rc-ot-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rc-ot-tabs[hidden], .rc-ot-bar[hidden] { display: none !important; }
.rc-ot-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 52px;
    padding: 8px 4px;
    border: 1px solid var(--robbo-line);
    border-radius: 14px;
    background: var(--robbo-white);
    color: var(--robbo-coal);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.rc-ot-tab-day { font-size: var(--robbo-fs-lg); font-weight: 800; line-height: 1.1; }
.rc-ot-tab-t { display: none; font-size: var(--robbo-fs-md); line-height: 1.25; text-align: center; }
.rc-ot-tab:hover { border-color: var(--robbo-green); }
.rc-ot-tab:focus-visible { outline: 2px solid var(--robbo-green); outline-offset: 2px; }
.rc-ot-tab.is-done { background: var(--ot-mint); border-color: color-mix(in srgb, var(--robbo-green) 40%, transparent); }
.rc-ot-tab[aria-selected="true"] { background: var(--robbo-green); border-color: var(--robbo-green); color: var(--robbo-white); }
.rc-ot-bar {
    position: relative;
    height: 8px;
    margin: 12px 0 18px;
    border-radius: 999px;
    background: var(--robbo-grey-light);
    overflow: hidden;
}
.rc-ot-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ot-progress, 20%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ot-green-top), var(--robbo-green));
    transition: width 0.45s ease;
}
.rc-ot-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.rc-ot-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--robbo-line);
    border-radius: 20px;
    background: var(--robbo-white);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--robbo-coal) 8%, transparent);
}
.rc-ot-log.is-js .rc-ot-day { display: none; }
.rc-ot-log.is-js .rc-ot-day.is-active { display: grid; animation: rc-ot-in 0.35s ease; }
@keyframes rc-ot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rc-ot-photo { margin: 0; aspect-ratio: 4 / 3; background: var(--robbo-grey-light); }
.rc-ot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-ot-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 20px 22px; }
.rc-ot-when {
    font-size: var(--robbo-fs-badge);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ot-blue);
}
.rc-ot-t { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--robbo-black); }
.rc-ot-p { margin: 0; font-size: var(--robbo-fs-base); line-height: 1.6; }
.rc-ot-next {
    margin-top: auto;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid var(--robbo-green);
    border-radius: 999px;
    background: var(--robbo-white);
    color: var(--robbo-green-dark);
    font: inherit;
    font-size: var(--robbo-fs-md);
    font-weight: 700;
    cursor: pointer;
}
.rc-ot-next[hidden] { display: none !important; }
.rc-ot-next:hover { background: var(--robbo-green); color: var(--robbo-white); }
.rc-ot-next:focus-visible { outline: 2px solid var(--robbo-green); outline-offset: 2px; }

/* «Was in Otto steckt» — the Otto of the hero, drawn, with its parts numbered. */
.rc-ot-anatomy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    max-width: 1040px;
    margin: 36px auto 0;
    padding: 24px 20px;
    border-radius: 24px;
    background: var(--ot-blue-soft);
}
.rc-ot-fig { margin: 0 auto; width: 100%; max-width: 220px; }
.rc-ot-svg { display: block; width: 100%; height: auto; }
.rc-ot-head-top { fill: var(--ot-green-top); }
.rc-ot-head-box { fill: var(--ot-green); }
.rc-ot-eye { fill: var(--ot-steel); }
.rc-ot-eye-in { fill: var(--ot-ink); }
.rc-ot-body, .rc-ot-leg, .rc-ot-foot { fill: var(--robbo-white); stroke: #C9CED4; stroke-width: 2; }
.rc-ot-pin circle { fill: var(--ot-blue); stroke: var(--robbo-white); stroke-width: 3; }
.rc-ot-pin text { fill: var(--robbo-white); font: 700 14px 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif; }
.rc-ot-pin { transform-box: fill-box; transform-origin: center; animation: rc-ot-pin 2.4s ease-in-out infinite; animation-delay: calc(var(--ot-pin) * 0.3s); }
@keyframes rc-ot-pin { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.15); } }
.rc-ot-h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--robbo-black); }
.rc-ot-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rc-ot-part { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: var(--robbo-fs-base); line-height: 1.5; }
.rc-ot-part strong { color: var(--robbo-black); }
.rc-ot-num {
    flex: 0 0 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ot-blue);
    color: var(--robbo-white);
    font-size: var(--robbo-fs-sm);
    font-weight: 700;
}
.rc-ot-note { margin: 12px 0 0; font-size: var(--robbo-fs-md); line-height: 1.5; color: var(--robbo-coal); }
.rc-ot-more { max-width: 1040px; margin: 24px auto 0; font-size: var(--robbo-fs-base); line-height: 1.6; text-align: center; }
.rc-ot-more a { font-weight: 700; color: var(--robbo-green-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 600px) {
    .rc-ot-tab-t { display: block; }
    .rc-ot-tab { min-height: 64px; }
}
@media (min-width: 900px) {
    .rc-ot-day { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .rc-ot-photo { aspect-ratio: auto; min-height: 340px; }
    .rc-ot-text { padding: 28px 30px; }
    .rc-ot-anatomy { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; padding: 32px 40px; }
    .rc-ot-fig { max-width: 240px; }
}
@media (min-width: 1024px) {
    .rc-ot { padding: 64px 32px 72px; }
    .rc-ot-h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .rc-ot-pin, .rc-ot-log.is-js .rc-ot-day.is-active { animation: none; }
    .rc-ot-bar-fill, .rc-ot-tab { transition: none; }
}