.hubspot-placeholder {
    padding: 80px 0;
    background: var(--color-white);
}

.hubspot-placeholder__forms {
    display: grid;
    gap: 32px;
}

.hubspot-placeholder__event-cta {
    margin: 0;
    text-align: center;
}

/* ============================================================
   Card shell (parent page) — Figma: solid #1c388f, 24px radius,
   1280px wide, 60px horizontal padding, no shadow
   ============================================================ */
.ah-infoform {
    --ah-accent: var(--color-green);
    --ah-navy: #13265e;
    --ah-radius-card: 24px;

    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 60px 56px;
    color: var(--color-white);
    border-radius: var(--ah-radius-card);
    /* Pixel-vermessen 16.07.: die Mehrheit der HubSpot-Innenpanels laeuft
       hell (#2142a3) links -> dunkel (#213a8f) rechts. Default daher to left;
       Formulare mit gegenlaeufigem Panel bekommen unten per Key to right. */
    background: linear-gradient(to left, #213a8f, #2142a3);
}

.ah-infoform--bachelor,
.ah-infoform--master-event,
.ah-infoform--admission-bachelor,
.ah-infoform--wb-hr-psychology,
.ah-infoform--wb-business-education,
.ah-infoform--wb-finance-risk,
.ah-infoform--wb-economics-methods,
.ah-infoform--wb-marketing-management,
.ah-infoform--wb-political-science {
    background: linear-gradient(to right, #213a8f, #2142a3);
}

/* Meeting 15.07.: Titel immer weiss, auch wenn die Karte in Seiteninhalt
   eingebettet ist (.page-rich-content h4 wuerde sonst gewinnen). */
.ah-infoform .hubspot-placeholder__title {
    color: var(--color-white);
}

/* Meeting 15.07.: Formular-Umschalter auf Master-Seiten. */
.hubspot-placeholder__box[hidden] {
    display: none;
}

.ah-infoform--compact {
    max-width: none;
    margin: 40px 0;
    padding: 36px 40px;
}

.hubspot-placeholder__title {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.32;
    margin: 0 0 16px;
    text-align: center;
}

.ah-infoform--compact .hubspot-placeholder__title {
    font-size: clamp(24px, 2.5vw, 32px);
}

.hubspot-placeholder__lead {
    max-width: 720px;
    margin: 0 auto 48px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 28px;
    text-align: center;
}

.hubspot-placeholder__form {
    min-width: 0;
    color: var(--color-white);
    text-align: left;
}

.hs-form-frame {
    display: block;
    width: 100%;
    min-width: 0;
}

.hubspot-placeholder__noscript {
    margin: 16px 0 0;
    color: var(--color-white);
}

.hubspot-placeholder__noscript a {
    color: var(--color-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body .ah-infoform :focus-visible:not(iframe) {
    outline: 3px solid var(--color-white) !important;
    outline-offset: 3px !important;
}

/* The outer HubSpot iframe must never receive the white accessibility ring.
   Controls inside the cross-origin form retain HubSpot's own focus styling. */
.hs-form-frame iframe {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .hubspot-placeholder { padding: 48px 0; }
    .hubspot-placeholder__forms { gap: 24px; }
    .ah-infoform,
    .ah-infoform--compact {
        margin-left: 0;
        margin-right: 0;
        padding: 24px 20px 32px;
        border-radius: 20px;
    }
    .hubspot-placeholder__title { font-size: 30px; line-height: 42px; }
    .hubspot-placeholder__lead { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
}


/* Meeting 15.07. (Nachschliff): Die drei Zulassungs-Formulare malen ihren
   Verlauf im iframe SPIEGELVERKEHRT (hell links -> dunkel rechts); die Karte
   dieser drei Boxen laeuft deshalb ebenfalls nach links. */

/* Client 24.07 (Master 2): beide Formulare gleiche Verlaufsrichtung (to left wie das Infomaterial-Formular). */
.ah-infoform--master-event { background: linear-gradient(to left, #213a8f, #2142a3); }