/* ============================================================
   ROCC Kostenrechner (2026) — /kostenrechner-fuer-videoproduktionen/
   Namespace: .rkc-* inside .r26 (tokens come from rocc-2026.css).
   Layout: inputs left, sticky navy "Kalkulationsbogen" right.
   ============================================================ */

/* ---- band + grid ---- */
.rkc-band{padding:clamp(8px,2vw,24px) 0 var(--r26-pad-sec,96px);background:var(--r26-canvas,#F5F4F1);}
.rkc-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(24px,3vw,44px);align-items:start;}
@media(max-width:1020px){.rkc-grid{grid-template-columns:minmax(0,1fr);}}

/* ---- input groups ---- */
.rkc-form{display:grid;gap:clamp(28px,4vw,44px);min-width:0;}
.rkc-group{border:0;padding:0;margin:0;min-width:0;}
.rkc-legend{display:flex;align-items:center;gap:12px;font-family:var(--r26-font-head,Montserrat,sans-serif);font-weight:700;font-size:clamp(19px,2vw,23px);line-height:1.2;letter-spacing:-.01em;color:var(--r26-blue-deep,#1A2A5C);padding:0;margin:0 0 6px;}
.rkc-legend-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--r26-blue-deep,#1A2A5C);color:#fff;font-family:var(--r26-font-mono,monospace);font-size:15px;font-weight:400;}
.rkc-group-sub{font-size:15px;color:var(--r26-muted,#7A7A7A);margin:0 0 18px;}

/* visually hidden but focusable inputs */
.rkc-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;}

/* ---- format cards ---- */
.rkc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media(max-width:560px){.rkc-cards{grid-template-columns:minmax(0,1fr);}}
.rkc-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--r26-surface,#fff);border:1.5px solid var(--r26-hairline-soft,#E5E3DE);border-radius:var(--r26-radius-card,10px);padding:18px 20px 16px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.rkc-card:hover{border-color:var(--r26-blue,#2F4E9E);transform:translateY(-1px);box-shadow:0 10px 26px rgba(20,20,18,.07);}
.rkc-card.is-selected,.rkc-card:has(input:checked){border-color:var(--r26-blue,#2F4E9E);background:var(--r26-chip,#ECEFF7);box-shadow:0 10px 26px rgba(47,78,158,.10);}
.rkc-card:has(input:focus-visible),.rkc-tier:has(input:focus-visible),.rkc-extra:has(input:focus-visible){outline:2px solid var(--r26-blue,#2F4E9E);outline-offset:2px;}
/* JS fallback for browsers without :has() (class set on focusin) */
.rkc-card.is-focus,.rkc-tier.is-focus,.rkc-extra.is-focus{outline:2px solid var(--r26-blue,#2F4E9E);outline-offset:2px;}
.rkc-card-name{font-weight:700;font-size:16px;color:var(--r26-ink,#1C1C1A);}
.rkc-card-desc{font-size:13.5px;line-height:1.5;color:var(--r26-muted,#7A7A7A);}
.rkc-card-price{margin-top:auto;padding-top:8px;font-family:var(--r26-font-mono,monospace);font-size:13px;color:var(--r26-blue,#2F4E9E);}
.rkc-card::after{content:"";position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--r26-hairline,#D9D6CE);background:#fff;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.rkc-card.is-selected::after,.rkc-card:has(input:checked)::after{border-color:var(--r26-blue,#2F4E9E);background:var(--r26-blue,#2F4E9E);box-shadow:inset 0 0 0 3.5px #fff;}

/* ---- tier cards ---- */
.rkc-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media(max-width:760px){.rkc-tiers{grid-template-columns:minmax(0,1fr);}}
.rkc-tier{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--r26-surface,#fff);border:1.5px solid var(--r26-hairline-soft,#E5E3DE);border-radius:var(--r26-radius-card,10px);padding:22px 20px 18px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.rkc-tier:hover{border-color:var(--r26-blue,#2F4E9E);transform:translateY(-1px);box-shadow:0 10px 26px rgba(20,20,18,.07);}
.rkc-tier.is-selected,.rkc-tier:has(input:checked){border-color:var(--r26-blue,#2F4E9E);background:var(--r26-chip,#ECEFF7);box-shadow:0 10px 26px rgba(47,78,158,.10);}
.rkc-tier--featured{border-color:var(--r26-blue,#2F4E9E);}
.rkc-tier-badge{position:absolute;top:-11px;left:18px;background:var(--r26-blue-deep,#1A2A5C);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.rkc-tier-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--r26-muted-soft,#9B9A93);}
.rkc-tier.is-selected .rkc-tier-label,.rkc-tier:has(input:checked) .rkc-tier-label{color:var(--r26-blue,#2F4E9E);}
.rkc-tier-name{font-family:var(--r26-font-head,Montserrat,sans-serif);font-weight:700;font-size:18px;color:var(--r26-ink,#1C1C1A);margin-bottom:6px;}
.rkc-tier-details{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13.5px;line-height:1.5;color:var(--r26-body,#2A2A28);}
.rkc-tier-details li:first-child{font-weight:700;color:var(--r26-ink,#1C1C1A);}

/* ---- extras ---- */
.rkc-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media(max-width:640px){.rkc-extras{grid-template-columns:minmax(0,1fr);}}
.rkc-extra{display:flex;align-items:flex-start;gap:12px;background:var(--r26-surface,#fff);border:1.5px solid var(--r26-hairline-soft,#E5E3DE);border-radius:var(--r26-radius-card,10px);padding:14px 16px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease;}
.rkc-extra:hover{border-color:var(--r26-blue,#2F4E9E);box-shadow:0 8px 20px rgba(20,20,18,.06);}
.rkc-extra.is-checked,.rkc-extra:has(input:checked){border-color:var(--r26-blue,#2F4E9E);background:var(--r26-chip,#ECEFF7);}
.rkc-extra-box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:5px;border:1.5px solid var(--r26-hairline,#D9D6CE);background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .18s ease,border-color .18s ease;}
.rkc-extra-box::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .15s ease;}
.rkc-extra.is-checked .rkc-extra-box,.rkc-extra:has(input:checked) .rkc-extra-box{background:var(--r26-blue,#2F4E9E);border-color:var(--r26-blue,#2F4E9E);}
.rkc-extra.is-checked .rkc-extra-box::after,.rkc-extra:has(input:checked) .rkc-extra-box::after{opacity:1;}
.rkc-extra-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rkc-extra-name{font-weight:600;font-size:14.5px;color:var(--r26-ink,#1C1C1A);}
.rkc-extra-sub{font-size:12.5px;color:var(--r26-muted,#7A7A7A);}
.rkc-extra-sub .rkc-mono{font-family:var(--r26-font-mono,monospace);color:var(--r26-blue,#2F4E9E);}

/* ---- the Kalkulationsbogen (sticky navy panel) ---- */
.rkc-side{position:sticky;top:92px;min-width:0;}
@media(max-width:1020px){.rkc-side{position:static;}}
.rkc-panel{background:var(--r26-blue-deep,#1A2A5C);color:#fff;border-radius:var(--r26-radius-band,12px);padding:clamp(22px,2.6vw,30px);box-shadow:0 18px 44px rgba(16,24,58,.22);}
/* never let the sticky panel outgrow the viewport and strand the CTA
   (all-extras state ≈ 840px tall). On the panel, not .rkc-side, so the
   box-shadow is not clipped — an element's own shadow ignores its own
   overflow. */
@media(min-width:1021px){.rkc-panel{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}}
.rkc-panel-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--r26-blue-light,#8FB8D9);margin:0 0 4px;display:flex;align-items:center;gap:8px;}
.rkc-panel-kicker::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14);}
.rkc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px;min-height:26px;}
.rkc-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:12px;line-height:1.4;color:#fff;}
.rkc-chip--extra{background:rgba(143,184,217,.16);border-color:rgba(143,184,217,.3);color:var(--r26-blue-light,#8FB8D9);}
.rkc-range-label{font-size:13px;color:rgba(255,255,255,.72);margin:0 0 2px;}
.rkc-range{font-family:var(--r26-font-mono,monospace);font-size:clamp(23px,2.2vw,29px);line-height:1.25;color:#fff;letter-spacing:-.01em;}
.rkc-range-num{white-space:nowrap;}
.rkc-netto{font-family:var(--r26-font-body,sans-serif);font-size:13px;color:rgba(255,255,255,.6);margin-left:6px;letter-spacing:.02em;}
.rkc-why{margin:14px 0 0;padding:10px 12px;border-left:2px solid var(--r26-blue-light,#8FB8D9);background:rgba(143,184,217,.08);border-radius:0 8px 8px 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.85);}
/* breakdown rows + share bars */
.rkc-rows{margin:18px 0 0;display:grid;gap:12px;}
.rkc-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.rkc-row-label{font-size:13px;color:rgba(255,255,255,.85);min-width:0;}
.rkc-row-val{font-family:var(--r26-font-mono,monospace);font-size:12.5px;color:#fff;white-space:nowrap;}
.rkc-bar{margin-top:5px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.rkc-bar span{display:block;height:100%;border-radius:2px;background:var(--r26-blue-light,#8FB8D9);transition:width .35s ease;}
.rkc-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:13.5px;font-weight:700;color:#fff;}
.rkc-total-val{font-family:var(--r26-font-mono,monospace);font-weight:400;white-space:nowrap;}
.rkc-note{font-size:12px;line-height:1.6;color:rgba(255,255,255,.55);margin:14px 0 0;}
/* panel actions */
.rkc-actions{display:grid;gap:10px;margin-top:18px;}
.rkc-cta{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--r26-blue-deep,#1A2A5C);font-weight:700;font-size:15px;line-height:1;padding:15px 22px;border-radius:var(--r26-radius-btn,8px);text-decoration:none;transition:background .18s ease,transform .18s ease;}
.r26 .rkc-panel a.rkc-cta{color:var(--r26-blue-deep,#1A2A5C);text-decoration:none;}
.rkc-cta:hover{background:var(--r26-chip,#ECEFF7);transform:translateY(-1px);}
.rkc-copy{background:transparent;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.85);font-family:var(--r26-font-body,sans-serif);font-size:12.5px;padding:9px 14px;border-radius:var(--r26-radius-btn,8px);cursor:pointer;transition:background .18s ease,border-color .18s ease;}
.rkc-copy:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);}
.rkc-copy:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.r26 .rkc-panel a.rkc-roi{display:block;text-align:center;font-size:13px;color:var(--r26-blue-light,#8FB8D9);text-decoration:none;text-underline-offset:3px;}
.r26 .rkc-panel a.rkc-roi:hover{text-decoration:underline;}
.rkc-nojs{font-size:13px;color:var(--r26-muted,#7A7A7A);margin:10px 0 0;}

/* ---- mobile summary bar (JS-enabled, <=1020px only) ---- */
.rkc-mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--r26-blue-deep,#1A2A5C);color:#fff;box-shadow:0 -8px 24px rgba(16,24,58,.28);}
.rkc-mbar.is-on{display:flex;}
@media(min-width:1021px){.rkc-mbar.is-on{display:none;}}
.rkc-mbar-text{display:flex;flex-direction:column;min-width:0;}
.rkc-mbar-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--r26-blue-light,#8FB8D9);}
.rkc-mbar-val{font-family:var(--r26-font-mono,monospace);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.r26 a.rkc-mbar-link{flex:0 0 auto;background:#fff;color:var(--r26-blue-deep,#1A2A5C);font-weight:700;font-size:13px;padding:9px 14px;border-radius:8px;text-decoration:none;}

/* ---- value flash on update ---- */
@keyframes rkc-flash{0%{color:var(--r26-blue-light,#8FB8D9);}100%{color:#fff;}}
.rkc-range.is-fresh .rkc-range-num{animation:rkc-flash .5s ease;}
@media(prefers-reduced-motion:reduce){
  .rkc-range.is-fresh .rkc-range-num{animation:none;}
  .rkc-bar span{transition:none;}
  .rkc-card,.rkc-tier,.rkc-extra,.rkc-cta{transition:none;}
}

/* ============================================================
   Supporting sections on the page
   ============================================================ */
/* budget tips grid — rendered by [rocc_kostenrechner_tips] */
.rkc-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media(max-width:900px){.rkc-tips{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.rkc-tips{grid-template-columns:minmax(0,1fr);}}
.rkc-tip{background:var(--r26-surface,#fff);border:1px solid var(--r26-hairline-soft,#E5E3DE);border-radius:var(--r26-radius-card,10px);padding:24px;transition:transform .2s ease,box-shadow .2s ease;}
.rkc-tip:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(20,20,18,.08);}
.rkc-tip-num{font-family:var(--r26-font-mono,monospace);font-size:13px;color:var(--r26-blue,#2F4E9E);display:block;margin-bottom:10px;}
.rkc-tip-title{font-family:var(--r26-font-head,Montserrat,sans-serif);font-weight:700;font-size:16.5px;line-height:1.3;color:var(--r26-blue-deep,#1A2A5C);margin:0 0 8px;}
.rkc-tip-text{font-size:14.5px;line-height:1.6;color:var(--r26-body,#2A2A28);margin:0;}