/* Organigramm SVG
 *
 * Used by an inline <svg class="organigramm"> dropped into an article on
 * the Verwaltungsrat page. Figma frame "organigramm" (node 31:121) is
 * 1396 px wide on a 1728 px page and sits at x=162 — i.e. it OVERHANGS
 * the 1128 px content column ("Flucht links") by ≈ 138 px on the left
 * and ≈ 130 px on the right. We replicate that on-screen by pulling the
 * SVG out of the centred #inhalt column with negative margins, clamped
 * to whatever gutter the viewport actually offers so it never overflows
 * the page on smaller screens.
 *
 * (The legacy mod_serenade_organigramm Joomla module has been
 * superseded by this approach; its template still loads this file via
 * joomla.asset.json so we keep the path in place.)
 * ------------------------------------------------------------------- */

/* Scoped to #inhalt so we out-specificity the generic
 * "#inhalt > * { width:100%; max-width:100%; margin:0 }" reset in
 * template.css. */
#inhalt .organigramm,
.organigramm {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    color: var(--c-petrol);
}

/* Break out of the 1128 px content column as soon as there is gutter
 * space available next to it. The overhang is the smaller of:
 *   - the Figma value (138 px left / 130 px right), and
 *   - the actual gutter minus a 20 px safety margin.
 */
@media (min-width: 1188px) {
    #inhalt .organigramm,
    .organigramm {
        --organigramm-gap-left:  min(
            138px,
            calc((100vw - var(--layout-inner)) / 2 - var(--s-4))
        );
        --organigramm-gap-right: min(
            130px,
            calc((100vw - var(--layout-inner)) / 2 - var(--s-4))
        );

        margin-left:  calc(-1 * var(--organigramm-gap-left));
        margin-right: calc(-1 * var(--organigramm-gap-right));
        width: auto;
        max-width: none;
    }
}