.rh-section > .card,
.rh-cta > .card{
    border-radius: var(--rh-radius);
}
/* CTA emphasis */
.rh-cta .card{
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--rh-accent-strong);
    background: linear-gradient(180deg, var(--rh-editorial-bg) 0%, var(--rh-card) 100%);
}
.rh-cta .card::after{
    content: "";
    position: absolute;
    inset: -40% -60% auto auto;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle at 30% 30%, rgba(5, 102, 93, 0.18), rgba(5, 102, 93, 0));
}
/* Desktop TOC + benefits (DevOps page) */
.rh-devops-layout{
    align-items: start;
}
.rh-benefits__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.rh-badge-soft{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--rh-accent-border);
    background: var(--rh-accent-soft);
    color: var(--bs-body-color);
    padding: .5rem .75rem;
    font-weight: 600;
    font-size: .875rem;
}
.rh-editorial .lead,
.rh-section .card-body > p,
.rh-section .card-body > ul{
    max-width: 70ch;
}
/* nicer list rhythm in cards */
.rh-section ul{
    line-height: 1.7;
}
.rh-section ul li + li{
    margin-top: .35rem;
}
.rh-benefits__item{ margin: 0; }
/* Enhanced Klartext callout: use existing editorial surface for contrast
   This targets only selected paragraphs and avoids adding new colors.
*/
.rh-klartext--callout{
    display: block;
    padding: 1rem 1.1rem;
    margin: 0.6rem 0;
    background: var(--rh-editorial-bg);
    border-left: 4px solid var(--rh-editorial-border);
    border-radius: 0.6rem;
    color: var(--rh-text);
    max-width: var(--rh-editorial-max);
}
/* ==========================
   Section: Worum es wirklich geht
   ========================== */
.rh-section--worum { padding: 2.5rem 0; }
.rh-section--worum .rh-callout{
    background: var(--rh-accent-soft);
    border: 1px solid var(--rh-accent-border);
    border-left: 4px solid var(--rh-accent-strong);
}
/* ------------------------------------------------------------
   Accent utilities (targeted, WCAG-friendly)
------------------------------------------------------------ */
.rh-accent-strong { color: var(--rh-accent-strong) !important; }
.rh-accent-soft-bg { background: var(--rh-accent-soft) !important; }
.rh-accent-outline{
    border: 1px solid var(--rh-accent-border) !important; /* safe fallback */
}
/* Progressive enhancement for nicer border tone */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
    .rh-accent-outline{
        border-color: color-mix(in srgb, var(--rh-accent-strong) 32%, transparent) !important;
    }
}
.rh-icon--accent{ color: var(--rh-accent-strong); }
.rh-worum__bullets strong{
    display: inline-block;
    margin-bottom: .125rem;
}
.rh-concept{

    background: var(--rh-card);
}
.rh-concept--primary .text-body-secondary{
    color: var(--rh-text-muted) !important;
}
.rh-concept.rh-accent-outline{
    border-color: var(--bs-border-color) !important;
}
/* primary: bleibt akzentuiert */
.rh-concept--primary.rh-accent-outline{
    border-color: var(--rh-accent-border) !important;
}
/* NOTE: Global utilities (.rh-skip-link, focus rings, .rh-callout base, reduced-motion, .section--surface)
   are defined in assets/css/styles.css — not duplicated here to avoid conflicts. */
/* End of added accent utilities */


/* =========================================================
   DevOps page — spacing & rhythm pass (2026-01)
   Goal: clearer section separation, calmer vertical flow
   ========================================================= */

/* Benefits (chips) — calmer + more breathing room */
.rh-benefits{
    margin: 0 0 clamp(2rem, 4vw, 3rem) 0 !important;
}
.rh-benefits__list{
    gap: .6rem .6rem;
}
/* Universal section rhythm (prefer CSS over ad-hoc mb-* utilities) */
.rh-section{
    padding-block: var(--rh-section-pad);
}
.rh-section + .rh-section{
    margin-top: 0;
}
/* Optional surface sections */
.rh-section--surface{
    background: var(--rh-surface);
    border-radius: var(--rh-radius);
    padding-inline: clamp(1rem, 2vw, 1.5rem);
}
/* Section headings */
.rh-section > h2,
.rh-section > .rh-section__head > h2{
    margin-bottom: 1.25rem;
}
.rh-section__lead{
    max-width: 72ch;
}
/* Make card padding consistent within sections */
.rh-section .card:not(.rh-toc__card) .card-body{
    padding: var(--rh-card-pad) !important;
}
/* Worum-es-wirklich-geht: separate thesis vs concepts */
.rh-section--worum .row + .row{
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* CTA separation */
.rh-cta{
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Results section spacing (aligned with section gap tokens) */
#ergebnisse{
    padding-bottom: var(--rh-section-gap);
}
/* Lists: calmer rhythm inside cards */
.rh-section .card-body ul{
    margin-bottom: 0;
    line-height: 1.75;
}
.rh-section .card-body ul li + li{
    margin-top: .4rem;
}
/* =========================
   Non-sticky layout overrides
   (Header + TOC not sticky)
   ========================= */

/* 1) Anchor offsets: not needed when nothing is sticky */
.rh-section,
.rh-cta,
section[id] {
    scroll-margin-top: 0 !important;
}
/* Divider zwischen TOC-geführten und freien Sections */
.rh-section-divider {
    border: 0;
    height: 1px;
    background: var(--bs-border-color);
    margin: clamp(1.25rem, 2.5vw, 2rem) 0;
}
/* Nach dem letzten TOC-Ziel (Einstieg) mehr Abschluss */
#einstieg {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* =========================
   HERO – Hierarchie schärfen
   ========================= */

/* Callout stärker als Subline */
.rh-page__header + .rh-callout,
.rh-callout--info {
    font-size: 1.05rem;
    border-left-width: 5px;
}
/* Chips bewusst sekundärer */
.rh-benefits__item .badge {
    font-size: .85rem;
    opacity: .85;
}
.rh-section__lead {
    max-width: 72ch;
}
/* =========================
   SYSTEM-SECTION gewichten
   ========================= */

/* Kernaussage-Card etwas dominanter */
.rh-section--worum > .row:first-child .card {
    background-color: var(--rh-editorial-bg);
}
/* =========================
   EINSTIEG – Höhepunkt
   ========================= */

.rh-cta .card {
    border: 2px solid var(--rh-primary);
    box-shadow: var(--rh-shadow-sm);
}
/* Einwände bewusst leiser */
#einwaende {
    opacity: .9;
}
#einwaende h2 {
    font-size: 1.25rem;
}