/* Legacy bridge polish — scoped to .legacy-content (DB content pages rendered
   through the old CSS stack styles.css/kutego.css). Loads AFTER those files
   (see app/Layouts/kutego.tpl.php legacy bridge block) and maps the most
   jarring legacy colors to the redesign tokens. Conservative: only clear
   clashes, no layout changes, Bootstrap collapse stays untouched. */

/* ---------- FAQ accordion (data-content="faq") → redesign card look
   (reference: webroot/redesign/branche-erste-hilfe.html .faq cards) ---------- */
.legacy-content .accordion .card {
    background: var(--white);
    border: 1px solid var(--border) !important;
    border-radius: 16px;
    box-shadow: var(--sh-sm);
    margin-bottom: 14px !important;
    overflow: hidden;
}
.legacy-content .accordion .card-header {
    background: var(--white);
    border-bottom: 0;
}
.legacy-content .accordion .card-header .card-title {
    display: block;
    text-align: left;
    white-space: normal;
    color: var(--ink);
    font-family: var(--f-body-bold);
    font-size: 1.08rem;
}
.legacy-content .accordion .card-header .card-title:hover,
.legacy-content .accordion .card-header .card-title:not(.collapsed) {
    color: var(--blue-dark);
}
.legacy-content .accordion .card-body {
    color: var(--text-mid);
    font-size: .96rem;
    line-height: 1.6;
}

/* ---------- Obvious legacy color clashes → tokens ---------- */
/* dark grey slab (.bg-2: #242f32 / #646f79) e.g. behind the FAQ block on
   /kursversicherung/ — becomes the redesign alternating section band */
.legacy-content .bg-2 {
    background-color: var(--cream-band) !important;
    color: var(--text-mid);
}
.legacy-content .bg-2 .headline { color: var(--ink); }
.legacy-content .bg-2 .text-secondary { color: var(--text-mid) !important; }
/* the .edge pseudo elements draw dark grey svg triangles matching the old
   slab color — hide them on the recolored band */
.legacy-content .bg-2.edge.bottom-right::after,
.legacy-content .bg-2.edge.top-left::before { display: none; }

/* the legacy styles.css resets the body to white and uppercases .btn -
   restore the redesign ground on bridge pages (loads after styles.css) */
body.legacy-page {
    background-color: var(--cream);
    font-family: var(--f-body);
    color: var(--text-mid, #41494f);
}
.legacy-content .sec { background: transparent; }
.legacy-content .sec--band { background: var(--cream-band); }
.btn-yellow, .btn-ink, .btn-ghostw { text-transform: none; }

/* legacy kutego.css restyles #promotions (pale yellow, blue hover) and
   styles.css sets body { overflow-x: hidden } which kills position:sticky
   on the gnav - re-assert the redesign behaviour on bridge pages */
body.legacy-page {
    /* clip keeps horizontal overflow contained without breaking sticky */
    overflow-x: clip;
}
body.legacy-page #promotions {
    background: var(--yellow);
    padding: 0;
    cursor: default;
}
body.legacy-page #promotions:hover {
    background: var(--yellow);
}
body.legacy-page #content {
    /* kutego.css sets #content { overflow: hidden } which also breaks the
       sticky gnav; horizontal clipping is already handled on the body */
    overflow: visible;
}
.legacy-content {
    /* clip over-wide legacy elements (100vw etc.) without breaking the
       sticky gnav, which lives outside this wrapper */
    overflow-x: clip;
}

/* page seal (e.g. Dogorama on /software-hundeschule/): sits right below the
   hero and overlaps into the content, like the old hero badges */
.legacy-content .page-seal {
    position: relative;
    z-index: 3;
    margin: -46px 0 24px;
    text-align: right;
    max-width: 1180px;
    padding: 0 22px;
    margin-left: auto;
    margin-right: auto;
}
.legacy-content .page-seal img {
    width: 150px;
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(22, 35, 61, .18));
}
@media (max-width: 860px) { .legacy-content .page-seal { display: none; } }

/* pro/contra comparison table (/online-teilnehmerliste/): full width card
   look; .table-responsive gives horizontal scrolling on small screens */
.legacy-content .pro-contra {
    margin-top: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--sh-sm);
}
.legacy-content .pro-contra .table {
    margin: 0;
    min-width: 640px;
}