/* CTP-Draggo-Elemente – Gestaltung nach der Redesign-Vorlage. Farben/Schriften über cata-site.css (--c-*, --ff-*). */
.ctp-empty { padding: 18px; border: 1.5px dashed var(--c-line, #CAD6D1); border-radius: 10px; color: var(--c-muted, #566A64); font: 13px/1.4 var(--ff-m, monospace); text-align: center; }

/* ---------------- Sprach-Medienwähler ---------------- */
.ctp-lm { display: grid; gap: 14px; }
.ctp-lm__stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); background: radial-gradient(120% 120% at 50% 0%, #1C514A, var(--c-ink)); }
.ctp-lm__stage video, .ctp-lm__stage img { display: block; width: 100%; height: auto; background: #0A211E; }
.ctp-lm__stage > a { display: block; }
/* Mit festem Seitenverhaeltnis fuellt das Medium die Buehne */
.ctp-lm__stage[style*="aspect-ratio"] > a { height: 100%; }
.ctp-lm__stage[style*="aspect-ratio"] video, .ctp-lm__stage[style*="aspect-ratio"] img { height: 100%; object-fit: contain; }
.ctp-lm__stage img { background: #fff; }
.ctp-lm__doc { display: grid !important; place-items: center; min-height: 160px; color: #fff; font-family: var(--ff-d); font-weight: 700; text-decoration: underline; }
.ctp-lm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ctp-lm__label { font: 500 12.5px/1.3 var(--ff-m); color: var(--c-muted); }
.ctp-lm__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.ctp-lm__opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-paper); color: var(--c-ink); text-decoration: none; transition: border-color .2s, background .2s; }
.ctp-lm__opt:hover { border-color: var(--c-ink); }
.ctp-lm__opt.is-on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ctp-lm__opt.is-off { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
.ctp-lm__flag { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(12, 38, 35, .12); }
.ctp-lm__code { font: 600 11.5px/1 var(--ff-m); letter-spacing: .02em; }
.ctp-onink .ctp-lm__opt { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); color: var(--c-on-ink); }
.ctp-onink .ctp-lm__opt.is-on { background: var(--c-amber); border-color: var(--c-amber); color: #2A1500; }
.ctp-onink .ctp-lm__label { color: var(--c-muted-on-ink); }

/* ---------------- ROI-/CO2-Rechner ---------------- */
.ctp-roi { border: 1px solid var(--c-ink-2); border-radius: 16px; overflow: hidden; background: var(--c-paper); }
.ctp-roi__head { padding: 18px clamp(22px, 3.6vw, 40px); background: var(--c-ink); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ctp-roi__title { margin: 0; font: 900 clamp(18px, 2.2vw, 22px)/1.1 var(--ff-d); letter-spacing: -.02em; color: #fff; }
.ctp-roi__sub { margin: 4px 0 0; font: 500 12.5px/1.4 var(--ff-m); color: var(--c-muted-on-ink); }
.ctp-roi__body { display: grid; grid-template-columns: minmax(280px, .9fr) 1.1fr; }
@media (max-width: 900px) { .ctp-roi__body { grid-template-columns: 1fr; } }
.ctp-roi__in { padding: clamp(22px, 3.4vw, 36px); background: #0A211E; color: var(--c-on-ink); }
.ctp-roi__in h4 { margin: 0 0 4px; color: #fff; font-size: 19px; }
.ctp-roi__hint { margin: 0 0 22px; font-size: 13px; color: var(--c-muted-on-ink); }
.ctp-roi__field { margin-bottom: 18px; }
.ctp-roi__field label { display: block; }
.ctp-roi__lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--c-on-ink); }
.ctp-roi__unit { font: 11px/1.2 var(--ff-m); color: var(--c-muted-on-ink); }
.ctp-roi__unit output { color: #F4C27A; font-weight: 600; }
.ctp-roi__field input[type=text], .ctp-roi__field input[type=number], .ctp-roi__field select { width: 100%; font: 15px/1.3 var(--ff-m); font-variant-numeric: tabular-nums; padding: 11px 13px; border-radius: 9px; border: 1px solid var(--c-ink-soft); background: #0C2A26; color: #fff; }
.ctp-roi__field input:focus, .ctp-roi__field select:focus { outline: 2px solid var(--c-amber); outline-offset: 1px; border-color: var(--c-amber); }
.ctp-roi__field input[type=range] { width: 100%; accent-color: var(--c-amber); }
.ctp-roi__checks { display: grid; gap: 8px; margin: 4px 0 22px; font-size: 13.5px; }
.ctp-roi__checks label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.ctp-roi__checks input { margin-top: 3px; accent-color: var(--c-amber); }
.ctp-roi__go { width: 100%; padding: 14px 20px; border: 0; border-radius: 9px; background: var(--c-amber); color: #2A1500; font: 700 15px/1.2 var(--ff-d); cursor: pointer; transition: background .2s, color .2s; }
.ctp-roi__go:hover { background: var(--c-amber-deep); color: #fff; }
.ctp-roi__out { padding: clamp(22px, 3.4vw, 36px); display: flex; flex-direction: column; }
.ctp-roi [hidden] { display: none !important; }
.ctp-roi__empty { flex: 1; display: grid; place-items: center; min-height: 220px; padding: 22px; border: 1.5px dashed var(--c-line); border-radius: 12px; text-align: center; color: var(--c-muted); font-size: 14.5px; }
.ctp-roi__empty strong { color: var(--c-amber-deep); }
.ctp-roi__res h4 { margin: 0 0 16px; font-size: 19px; }
.ctp-roi__res h4 span { color: var(--c-emerald); }
.ctp-roi__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ctp-roi__cell { border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 14px; }
.ctp-roi__cell .l { font-size: 11.5px; color: var(--c-muted); margin-bottom: 4px; }
.ctp-roi__cell .n { font: 800 17px/1.2 var(--ff-d); letter-spacing: -.01em; color: var(--c-ink); }
.ctp-roi__cell .n strong { font-weight: 800; }
.ctp-roi__cell.is-invest { background: var(--c-amber-tint); border-color: #F4C27A; }
.ctp-roi__tablewrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: 12px; }
.ctp-roi__table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13.5px; }
.ctp-roi__table th, .ctp-roi__table td { padding: 10px 12px; border-bottom: 1px solid var(--c-line-soft); border-left: 1px solid var(--c-line-soft); text-align: center; vertical-align: middle; }
.ctp-roi__table thead th { background: var(--c-paper-2); font: 600 12px/1.3 var(--ff-b); color: var(--c-ink-soft); }
.ctp-roi__table thead th.is-b, .ctp-roi__table thead tr:first-child th:last-child { background: var(--c-emerald-tint); }
.ctp-roi__table tbody th { text-align: left; font-weight: 600; background: var(--c-paper); border-left: 0; }
.ctp-roi__table td { font: 800 15px/1.2 var(--ff-d); color: var(--c-ink); }
.ctp-roi__table td.is-b { background: rgba(23, 135, 90, .06); }
.ctp-roi__table tr.is-co2 th, .ctp-roi__table tr.is-co2 td { color: var(--c-emerald); }
.ctp-roi__note { margin: 12px 0 0; font-size: 11.5px; color: var(--c-muted); text-align: right; }