/* Comparison tables use the original Ampel stylesheet and its components.
   This separate root shares the same theme tokens without activating Ampel JS. */
.mo-cc-comparison {
    --mo-cc-primary: var(--role-primary, #25325c);
    --mo-cc-secondary: var(--role-secondary, #e88e20);
    --mo-cc-secondary-hover: var(--role-secondary-hover, #d47f10);
    --mo-cc-radius-sm: var(--radius-sm, 6px);
    --mo-cc-radius-md: var(--radius-md, 10px);
    --mo-cc-radius-pill: var(--radius-pill, 999px);
    --mo-cc-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(37, 50, 92, 0.10));
    --mo-cc-font-heading: var(--font-heading, inherit);
    --mo-cc-font-content: var(--font-content, inherit);
    --mo-cc-link: var(--link, var(--mo-cc-primary));
    --mo-cc-text-body: var(--text-body, #333333);
    --mo-cc-text-secondary: var(--text-secondary, #52607d);
    --mo-cc-text-muted: var(--text-muted, #64708c);
    --mo-cc-border: var(--border, #dde1ea);
    --mo-cc-border-strong: var(--border-strong, #c3c9d8);
    --mo-cc-surface-page: var(--surface-page, #ffffff);
    --mo-cc-surface-card: var(--surface-card, #f7f8fb);
    --mo-cc-surface-muted: var(--surface-muted, #eef0f5);

    /* Gleicher Ampel-Farbsatz wie mo-cc-ampel.css, bewusst dupliziert
       (kein gemeinsamer Import), damit [ccampeltable] unabhaengig von
       [ccampel] bleibt. */
    --mo-cc-status-green: #2e9b57;
    --mo-cc-status-green-bg: #e5f5eb;
    --mo-cc-status-amber: #b9820e;
    --mo-cc-status-amber-bg: #fbf1da;
    --mo-cc-status-neutral: var(--mo-cc-text-muted);
    --mo-cc-status-neutral-bg: var(--mo-cc-surface-muted);
    --mo-cc-status-red: #c6433d;
    --mo-cc-status-red-bg: #fbeae9;

    box-sizing: border-box;
    font-family: var(--mo-cc-font-content);
    max-width: 100%;
    margin: 1.5rem 0;
}

.mo-cc-comparison *,
.mo-cc-comparison *::before,
.mo-cc-comparison *::after {
    box-sizing: inherit;
}


/* Art/name cells and headers use the original Ampel markup and styles unchanged. */
.mo-cc-comparison .mo-cc-ampel-table-scroll { position: relative; }
.mo-cc-comparison .mo-cc-ampel-table-cell--rate { min-width: 10rem; }
.mo-cc-comparison .mo-cc-ampel-table-cell--fee { min-width: 7rem; }
.mo-cc-comparison small { display: block; margin-top: 0.2rem; color: var(--mo-cc-text-muted); font-size: 0.8125rem; line-height: 1.35; white-space: normal; }
.mo-cc-comparison .mo-cc-comparison-group th { padding: 0.65rem 0.9rem; text-align: left; background: var(--mo-cc-surface-muted); color: var(--mo-cc-primary); font-family: var(--mo-cc-font-heading); font-size: 0.8125rem; font-weight: 600; border-bottom: 1px solid var(--mo-cc-border); }
.mo-cc-comparison-note { color: var(--mo-cc-text-secondary); font-size: 0.875rem; line-height: 1.4; }
.mo-cc-comparison .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mo-cc-comparison .mo-cc-ampel-table-scroll:focus-visible { outline: 2px solid var(--mo-cc-primary); outline-offset: 2px; }
@media(max-width:640px) { .mo-cc-comparison .mo-cc-comparison-group th { padding: 0.55rem 0.6rem; } }
.mocc-editor-row{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:16px;margin:12px 0;border:1px solid #c3c4c7;background:#f6f7f7}
.mocc-editor-row label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.mocc-editor-row input,.mocc-editor-row select,.mocc-editor-row textarea{width:100%;max-width:100%;font-weight:400}
.mocc-editor-row>div:last-child{display:flex;gap:8px;align-items:end;justify-content:end}

@media(max-width:780px){ .mocc-editor-row{grid-template-columns:1fr} }