/* mod_serenade_footer — Figma Frame 23:330 (1728 × 400 px).
 *
 * Layout strategy (so the address lines up with #inhalt above):
 *
 *   ┌─────────────────────── footer (full bleed) ──────────────────────────┐
 *   │ petrol band                                                          │
 *   │            ┌── inner (max 1128 px, centered) ──┐         ┌─ logo ─┐  │
 *   │            │ │ address  contact   │ legal      │         │        │  │
 *   │            ↑                      ↑                                  │
 *   │       divider 1                divider 2                             │
 *   └──────────────────────────────────────────────────────────────────────┘
 *
 *   The inner column matches #inhalt / #namemodul (max-width: 1128 px,
 *   margin: 0 auto), so divider 1 (left: 0 inside .__inner) lands on the
 *   exact same Flucht-links as the article body above.
 *
 *   Logo is positioned on the outer footer (right gutter) using Figma's
 *   own viewport-relative percentages — it sits beyond the 1128 column
 *   on wide screens, exactly like the Figma frame.
 */

/* j6template wraps the footer module in #footer-container — lift the cap
 * so the petrol band can run edge to edge. */
#footer-container:has(.mod-serenade-footer) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Figma footer component (node 23:330) is a fixed 1728 × 400 box with the
 * petrol band at inset top 44 % (= 176 px). A fixed height (not a
 * width-scaled aspect-ratio) keeps that 176 px transparent top — i.e. the
 * gap between the page content and the band — pixel-identical to Figma at
 * every desktop width, instead of shrinking on narrow screens and ballooning
 * on wide ones. All inner elements are positioned by % of this height, so
 * they keep landing on their exact Figma pixel offsets (e.g. 44 % → 176 px,
 * 58.5 % → 234 px, 61.5 % → 246 px). */
.mod-serenade-footer {
    position: relative;
    width: 100%;
    height: 400px;
    color: var(--c-white);
    font-family: var(--ff-text);
    line-height: var(--lh-text);
}

/* Petrol band — full bleed, top corners rounded 100 px. */
.mod-serenade-footer__bar {
    position: absolute;
    top: 44%;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--c-petrol);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    z-index: 0;
}

/* Inner column — same width and centering as #inhalt above. All text
 * columns and the dividers live inside this so they share the page's
 * Flucht-links. */
.mod-serenade-footer__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--layout-inner);
    z-index: 1;
}

@media (max-width: 1188px) {
    .mod-serenade-footer__inner {
        width: calc(100% - 2 * var(--s-6));
    }
}

/* Vertical gradient dividers — Figma Line 7. Original SVG is a 154 × 1 px
 * horizontal line with a linear gradient from solid white → white α 0.1,
 * then rotated 90 deg so the solid end ends up at the BOTTOM. */
.mod-serenade-footer__divider {
    position: absolute;
    top: 61.5%;
    width: 1px;
    height: 38.5%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 1)   100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Divider 1 — at the very left of the inner column (= Flucht links). */
.mod-serenade-footer__divider--1 { left: 0; }

/* Divider 2 — Figma left=888 / inner=1128 starting at 300 → 588/1128. */
.mod-serenade-footer__divider--2 { left: 52.13%; }

/* ===== Columns ===== */

.mod-serenade-footer__col {
    color: var(--c-white);
}

/* Text columns inside .__inner — positioned by % of the 1128 inner.
 *   Address  Figma x=323, inner left=300 →  23 / 1128 ≈ 2.04 %
 *   Contact  Figma x=598                  → 298 / 1128 ≈ 26.42 %
 *   Legal    Figma x=920                  → 620 / 1128 ≈ 54.96 %
 */
.mod-serenade-footer__inner .mod-serenade-footer__col {
    position: absolute;
    z-index: 3;
}

.mod-serenade-footer__col--address {
    top: 58.5%;
    left: 2.04%;
}

.mod-serenade-footer__col--contact {
    /* Figma's <p> begins with a <br>, pushing the first visible line down
     * by one line-height. Replicated here so the phone row visually aligns
     * with the second address row ("Mosenstrasse 19a"). */
    top: 59.75%;
    left: 26.42%;
    padding-top: 1.7em;
}

.mod-serenade-footer__col--legal {
    top: 67.25%;
    left: 54.96%;
}

/* Logo lives in the right gutter, on the OUTER .mod-serenade-footer, so
 * the address column stays aligned to #inhalt regardless of viewport. */
.mod-serenade-footer__col--logo {
    position: absolute;
    top: 58.5%;
    right: 4.75%;
    width: 8.16%;
    max-width: 141px;
    aspect-ratio: 840 / 709;
    z-index: 2;
}

.mod-serenade-footer__logo {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== Typography =====
 * Scales linearly with viewport via vw, clamped at a sensible min.
 *   24 px → 1.39 vw
 *   20 px → 1.157 vw
 *   14 px → 0.81 vw
 */
.mod-serenade-footer__company {
    margin: 0;
    font-weight: var(--fw-bold);
    font-size: clamp(15px, 1.39vw, 24px);
    line-height: var(--lh-text);
}

.mod-serenade-footer__line {
    margin: 0;
    font-weight: var(--fw-regular);
    font-size: clamp(13px, 1.157vw, 20px);
    line-height: var(--lh-text);
    white-space: nowrap;
}

.mod-serenade-footer__legalline,
.mod-serenade-footer__copyright {
    margin: 0;
    font-weight: var(--fw-regular);
    font-size: clamp(11px, 0.81vw, 14px);
    line-height: var(--lh-text);
    white-space: nowrap;
}

/* admotion credit line — slightly detached from the copyright above and a
   touch quieter than the legal links, so it reads as a discreet "made by". */
.mod-serenade-footer__credit {
    margin-top: var(--s-2);
    opacity: 0.7;
}

.mod-serenade-footer__link {
    color: var(--c-white);
    text-decoration: none;
    transition: opacity var(--tr-base);
}

.mod-serenade-footer__link:hover,
.mod-serenade-footer__link:focus-visible {
    opacity: 0.8;
    outline: none;
}

.mod-serenade-footer__link--small {
    font-size: inherit;
}


/* ===============================================================
 * Responsive — drop absolute positioning below 1024 px and stack
 * the columns on a normal grid. Petrol band fills the full block.
 * =============================================================== */

@media (max-width: 1024px) {
    /* Stacked footer: switch the outer box to a flex column so the logo
     * flows as its own item (top-right) instead of being absolutely
     * positioned over the text columns, which could overlap the contact
     * column on tablet widths. The petrol band stays absolute (top:0) as
     * the full-bleed background behind everything. */
    .mod-serenade-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-7);
        height: auto;
        padding: var(--s-10) var(--s-6) var(--s-7);
    }

    .mod-serenade-footer__bar {
        top: 0;
    }

    /* Logo: in-flow flex item, aligned to the right edge above the columns.
     * position:relative + z-index keep it ABOVE the absolute petrol band
     * (z-index:0) — a static flex item would paint behind the band and
     * disappear. */
    .mod-serenade-footer__col--logo {
        position: relative;
        z-index: 2;
        align-self: flex-end;
        width: 132px;
        max-width: 24%;
    }

    .mod-serenade-footer__inner {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: var(--layout-inner);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--s-7);
        row-gap: var(--s-6);
    }

    .mod-serenade-footer__divider {
        display: none;
    }

    .mod-serenade-footer__inner .mod-serenade-footer__col {
        position: static;
        top: auto;
        left: auto;
        padding-top: 0;
        max-width: none;
        width: auto;
    }

    .mod-serenade-footer__company { font-size: 22px; }
    .mod-serenade-footer__line {
        font-size: 18px;
        white-space: normal;
        overflow-wrap: break-word;
    }
    .mod-serenade-footer__legalline,
    .mod-serenade-footer__copyright {
        font-size: 14px;
        white-space: normal;
        overflow-wrap: break-word;
    }
}

@media (max-width: 640px) {
    .mod-serenade-footer {
        padding: var(--s-9) var(--s-5) var(--s-6);
    }

    .mod-serenade-footer__inner {
        grid-template-columns: 1fr;
    }

    .mod-serenade-footer__bar {
        border-top-left-radius: var(--rad-pill);
        border-top-right-radius: var(--rad-pill);
    }

    /* On phones the logo sits at the top-left of the stack. */
    .mod-serenade-footer__col--logo {
        align-self: flex-start;
        max-width: 28%;
    }
}