/**
 * camp-theme-drohnencamp — «Ein Flugprogramm aus Blöcken» (0.300.25).
 *
 * Light sky floor, orange gates, wooden boxes; command blocks in two colours (start/landing, flight)
 * like a block editor. Brand colours and text sizes stay on var(--robbo-*); Plakkaat only for h2.
 */

.rc-dr {
    --dr-himmel: #eef6fb;
    --dr-raster: #d6e6f1;
    --dr-tor: #e8791d;
    --dr-tor-soft: #fde9d6;
    --dr-kiste: #d8b27c;
    --dr-kiste-dark: #9b7342;
    --dr-flug: #2f62c4;
    --dr-flug-dark: #1f4690;
    --dr-dreh: #6a4fc0;
    --dr-dreh-dark: #4a3591;
    --dr-start: #f2b01e;
    --dr-start-dark: #b98207;
    --dr-tinte: #26292d;
    padding: 56px 0;
    background: var(--dr-himmel);
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    color: var(--robbo-coal);
}
.rc-dr *, .rc-dr *::before, .rc-dr *::after { box-sizing: border-box; }
.rc-dr-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.rc-dr-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.rc-dr-eyebrow {
    display: inline-block; font-size: var(--robbo-fs-badge); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--robbo-green-dark); background: var(--robbo-white); padding: 6px 12px; border-radius: 999px;
}
.rc-dr-h2 { font-family: 'Plakkaat', 'ProximaNova', sans-serif; font-weight: 500; font-size: 32px; line-height: 1.2; margin: 14px 0 10px; color: var(--robbo-black); }
.rc-dr-h3 { font-size: var(--robbo-fs-lg); font-weight: 800; line-height: 1.3; margin: 0 0 8px; color: var(--robbo-black); }
.rc-dr-lead { font-size: var(--robbo-fs-lg); line-height: 1.6; margin: 0; }

.rc-dr-sim {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start;
    background: var(--robbo-white); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(31, 70, 144, .08);
}
.rc-dr-stage { min-width: 0; }
.rc-dr-svg { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.rc-dr-floor { fill: var(--dr-himmel); stroke: var(--dr-raster); stroke-width: 2px; }
.rc-dr-gridline { stroke: var(--dr-raster); stroke-width: 1.5px; }
.rc-dr-start { fill: none; stroke: var(--robbo-coal); stroke-width: 2px; stroke-dasharray: 5 4; }
.rc-dr-pad { fill: var(--robbo-white); stroke: var(--robbo-green); stroke-width: 4px; }
.rc-dr-padtxt { font-size: 20px; font-weight: 800; fill: var(--robbo-green-dark); font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif; }
.rc-dr-box { fill: var(--dr-kiste); stroke: var(--dr-kiste-dark); stroke-width: 2px; }
.rc-dr-boxline { stroke: var(--dr-kiste-dark); stroke-width: 1.5px; opacity: .6; }
.rc-dr-gate line { stroke: var(--dr-tor); stroke-width: 5px; stroke-linecap: round; }
.rc-dr-gate rect { fill: var(--dr-tinte); }
.rc-dr-gate text { font-size: 15px; font-weight: 800; fill: var(--dr-tor); font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif; }
.rc-dr-gate.is-passed line { stroke: var(--robbo-green); }
.rc-dr-gate.is-passed text { fill: var(--robbo-green-dark); }
.rc-dr-example { fill: none; stroke: var(--dr-flug); stroke-width: 3px; stroke-dasharray: 7 6; stroke-linecap: round; stroke-linejoin: round; }
.rc-dr-trail { fill: none; stroke: var(--dr-flug); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.rc-dr-drone { transition: transform .38s ease-in-out; }
.rc-dr-shadow { fill: rgba(38, 41, 45, .12); transition: transform .38s ease-in-out; }
.rc-dr-drone.is-air .rc-dr-shadow { transform: translate(5px, 8px); }
.rc-dr-arm { stroke: var(--dr-tinte); stroke-width: 4px; stroke-linecap: round; }
.rc-dr-rotor { fill: var(--robbo-white); stroke: var(--dr-tinte); stroke-width: 2.5px; }
.rc-dr-body { fill: var(--dr-tinte); }
.rc-dr-nose { fill: var(--dr-tor); }

.rc-dr-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.rc-dr-legend li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--robbo-fs-md); line-height: 1.45; }
.rc-dr-key { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; border-radius: 4px; }
.rc-dr-key--start { border: 2px dashed var(--robbo-coal); }
.rc-dr-key--gate { background: var(--dr-tor); height: 6px; margin-top: 8px; border-radius: 3px; }
.rc-dr-key--pad { border: 3px solid var(--robbo-green); border-radius: 50%; }
.rc-dr-key--box { background: var(--dr-kiste); border: 2px solid var(--dr-kiste-dark); }

.rc-dr-code { min-width: 0; }
.rc-dr-live[hidden], .rc-dr-empty[hidden] { display: none !important; }
.rc-dr-sim.is-live .rc-dr-static { display: none; }
.rc-dr-note { font-size: var(--robbo-fs-md); line-height: 1.5; margin: 0 0 14px; }
.rc-dr-static .rc-dr-note { margin: 14px 0 0; }

.rc-dr-list { list-style: none; margin: 0; padding: 0; counter-reset: rcdr; display: grid; gap: 6px; }
.rc-dr-blk {
    --blk: var(--dr-flug); --blk-dark: var(--dr-flug-dark);
    position: relative; margin: 0; padding: 9px 14px 9px 44px; border-radius: 8px; counter-increment: rcdr;
    font-size: var(--robbo-fs-md); font-weight: 700; line-height: 1.35; color: var(--robbo-white);
    background: var(--blk); box-shadow: 0 3px 0 var(--blk-dark);
}
.rc-dr-blk::before {
    content: counter(rcdr); position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--dr-tinte);
    font-size: var(--robbo-fs-xs); font-weight: 800; line-height: 24px; text-align: center;
}
.rc-dr-blk--turn { --blk: var(--dr-dreh); --blk-dark: var(--dr-dreh-dark); }
.rc-dr-blk--start { --blk: var(--dr-start); --blk-dark: var(--dr-start-dark); color: var(--dr-tinte); }
.rc-dr-blk.is-now { outline: 3px solid var(--robbo-green); outline-offset: 2px; }

.rc-dr-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rc-dr-add {
    --blk: var(--dr-flug); --blk-dark: var(--dr-flug-dark);
    font-family: inherit; font-size: var(--robbo-fs-md); font-weight: 800; line-height: 1.2; min-height: 44px; padding: 10px 14px; cursor: pointer;
    color: var(--robbo-white); background: var(--blk); border: 0; border-radius: 8px; box-shadow: 0 3px 0 var(--blk-dark);
    transition: transform .12s ease, box-shadow .12s ease;
}
.rc-dr-add.rc-dr-blk--turn { --blk: var(--dr-dreh); --blk-dark: var(--dr-dreh-dark); }
.rc-dr-add.rc-dr-blk--start { --blk: var(--dr-start); --blk-dark: var(--dr-start-dark); color: var(--dr-tinte); }
.rc-dr-add:hover { transform: translateY(-1px); }
.rc-dr-add:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blk-dark); }
.rc-dr-add[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rc-dr-add:focus-visible, .rc-dr-btn:focus-visible, .rc-dr-run:focus-visible { outline: 3px solid var(--robbo-green-dark); outline-offset: 2px; }

.rc-dr-list--live { min-height: 44px; }
.rc-dr-empty { font-size: var(--robbo-fs-md); line-height: 1.5; color: var(--robbo-coal); margin: 0; padding: 12px 14px; border: 2px dashed var(--robbo-line); border-radius: 8px; }
.rc-dr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.rc-dr-run {
    font-family: inherit; font-size: var(--robbo-fs-base); font-weight: 800; min-height: 48px; padding: 12px 22px; cursor: pointer;
    color: var(--robbo-white); background: var(--robbo-green); border: 0; border-radius: 999px; transition: background .2s ease;
}
.rc-dr-run:hover, .rc-dr-run:focus { background: var(--robbo-green-dark); color: var(--robbo-white); }
.rc-dr-btn {
    font-family: inherit; font-size: var(--robbo-fs-md); font-weight: 700; min-height: 44px; padding: 10px 16px; cursor: pointer;
    color: var(--robbo-coal); background: var(--robbo-white); border: 1px solid var(--robbo-line); border-radius: 999px; transition: border-color .2s ease;
}
.rc-dr-btn:hover, .rc-dr-btn:focus { border-color: var(--robbo-green); background: var(--robbo-white); color: var(--robbo-coal); }
.rc-dr-result { min-height: 24px; margin: 12px auto 0; max-width: 400px; text-align: center; font-size: var(--robbo-fs-base); font-weight: 700; line-height: 1.45; }
.rc-dr-result.is-ok { color: var(--robbo-green-dark); }
.rc-dr-result.is-hint { color: var(--robbo-coal); }

@media (max-width: 899px) {
    .rc-dr-sim { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 719px) {
    .rc-dr { padding: 40px 0; }
    .rc-dr-wrap { padding: 0 16px; }
    .rc-dr-h2 { font-size: 26px; }
    .rc-dr-lead { font-size: var(--robbo-fs-base); }
    .rc-dr-sim { padding: 16px; border-radius: 16px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .rc-dr-drone, .rc-dr-shadow, .rc-dr-add, .rc-dr-run, .rc-dr-btn { transition: none !important; }
}