/**
 * Phänomen — Service Forms
 *
 * Palette: Ink #1A1A1A · Ink Soft #595959 · Ink Faint #707070
 *          Line #E0E0E0 · Surface #FFFFFF
 * Font:    Inter
 */

.ph-sf-mount,
.ph-sf-root,
.ph-sf-success {
    --ph-sf-ink: #1a1a1a;
    --ph-sf-ink-soft: #595959;
    --ph-sf-ink-faint: #707070;
    --ph-sf-line: #e0e0e0;
    --ph-sf-surface: #ffffff;
    --ph-sf-muted: #bfbfbf;
    --ph-sf-pill-line: #cccccc;
    /*
     * Single selected-state token, shared by chips, slot pills and the calendar
     * day circle. Figma's #212121 was a wireframe placeholder; the real palette
     * value is Ink. One token, one colour — do not reintroduce a second one.
     */
    --ph-sf-selected: #1a1a1a;
    --ph-sf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.ph-sf-mount,
.ph-sf-root,
.ph-popup-termin .ph-sf-success,
.ph-popup-anfrage .ph-sf-success {
    font-family: var(--ph-sf-font);
    color: var(--ph-sf-ink);
}

.ph-sf-mount *,
.ph-sf-root *,
.ph-popup-termin .ph-sf-success *,
.ph-popup-anfrage .ph-sf-success * {
    box-sizing: border-box;
}

/* Field wrapper + label -------------------------------------------------- */

.ph-sf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/*
 * Breakdance sets `align-items: flex-start` on .breakdance-form-field, which is a
 * column flex container — so its children do NOT stretch on the cross axis and an
 * `html` field collapses to its content width. Everything inside then resolves
 * `width: 100%` against that collapsed box, which is why our selects sized to
 * their longest option while the native inputs went full width (those are direct
 * flex children carrying .breakdance-form-field__input { width: 100% }).
 * Stretching the mount back restores parity.
 */
.ph-popup-termin .breakdance-form-field--html .form-input-html,
.ph-popup-anfrage .breakdance-form-field--html .form-input-html,
.ph-popup-termin .breakdance-form-field--html .ph-sf-mount,
.ph-popup-anfrage .breakdance-form-field--html .ph-sf-mount {
    align-self: stretch;
    width: 100%;
}

.ph-sf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ph-sf-ink);
}

/* Chips ------------------------------------------------------------------ */

.ph-sf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ph-sf-chip {
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--ph-sf-ink);
    border-radius: 0;
    background: var(--ph-sf-surface);
    color: var(--ph-sf-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ph-sf-chip:hover {
    background: #f5f5f5;
}

.ph-sf-chip.is-selected,
.ph-sf-chip[aria-pressed="true"] {
    background: var(--ph-sf-ink);
    color: var(--ph-sf-surface);
}

/* Selects ---------------------------------------------------------------- */

/*
 * Fully self-owned styling — deliberately NOT inheriting Breakdance's form
 * control classes, so a Breakdance update cannot restyle these from under us.
 *
 * Border colour is Line (NOT Ink) so these are indistinguishable from the native
 * Name / E-Mail / Telefonnummer inputs sitting next to them.
 *
 * HEIGHT + FONT PARITY with .breakdance-form-field__input:
 *   vertical padding : var(--bde-form-input-padding-top/-bottom)  -> 12px
 *   padding-left     : var(--bde-form-input-padding-left)         -> 16px
 *   font-size        : 15px   <- hardcoded ON PURPOSE, see below
 *   line-height      : 1.4    <- hardcoded ON PURPOSE, see below
 * Total: 12 + 12 padding + 2 border + (15 * 1.4 = 21) content = 47px.
 *
 * !! DO NOT "improve" font-size/line-height into var(--bde-form-font-size) !!
 * That token is a decoy. form.css sets `font-size: var(--bde-form-font-size)` on
 * the input, but global-settings.css OVERRIDES it further down the cascade with a
 * literal `font-size: 15px; line-height: 1.4`. The token resolves to 16px, so
 * following it yields a 46px control with 16px text next to 47px inputs with 15px
 * text — matching the stylesheet's intent instead of what actually renders. These
 * two values must mirror global-settings.css, not the token.
 *
 * The padding tokens ARE safe: nothing overrides them downstream.
 *
 * Horizontal padding is part ours: the left inset tracks the input's token so the
 * text lines up, while 40px right reserves room for the chevron (12px wide, inset
 * 16px, leaving 12px of clear space before the option text).
 *
 * THIS RULE IS THE SINGLE SOURCE OF TRUTH for the select's box. Do not add a
 * second rule restating padding, font-size or line-height: an override at equal
 * specificity would resolve on source order alone, so a reorder, a minifier that
 * merges selectors, or an append to this file could silently revert the height.
 */
.ph-sf-select,
.ph-sf-field .ph-sf-select,
.ph-sf-mount .ph-sf-select {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--bde-form-input-padding-top, 12px) 40px
             var(--bde-form-input-padding-bottom, 12px)
             var(--bde-form-input-padding-left, 16px);
    border: 1px solid var(--ph-sf-line);
    border-radius: 0;
    background-color: var(--ph-sf-surface);
    /* Chevron, drawn inline so there is no extra asset request. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231A1A1A' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    color: var(--ph-sf-ink);
    font-family: var(--bde-body-font-family, "Inter", sans-serif);
    font-size: 15px;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Hide the native arrow in legacy Edge/IE. */
.ph-sf-select::-ms-expand {
    display: none;
}

/* Calendar --------------------------------------------------------------- */

.ph-sf-calendar {
    border: 1px solid var(--ph-sf-line);
    border-radius: 0;
    padding: 16px;
    background: var(--ph-sf-surface);
}

.ph-sf-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.ph-sf-cal__title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ph-sf-ink);
}

.ph-sf-cal__nav {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ph-sf-ink-faint);
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ph-sf-cal__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.ph-sf-cal__weekdays,
.ph-sf-cal__row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ph-sf-cal__weekday {
    padding-bottom: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ph-sf-ink-soft);
}

.ph-sf-cal__cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-sf-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 2px auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ph-sf-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ph-sf-cal__day.is-outside {
    color: var(--ph-sf-muted);
}

.ph-sf-cal__day.is-disabled,
.ph-sf-cal__day:disabled {
    opacity: 0.35;
    cursor: default;
}

.ph-sf-cal__day.is-selected {
    background: var(--ph-sf-selected);
    color: var(--ph-sf-surface);
    font-weight: 700;
    opacity: 1;
}

/* Slot pills ------------------------------------------------------------- */

.ph-sf-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ph-sf-slot {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--ph-sf-pill-line);
    border-radius: 16px;
    background: var(--ph-sf-surface);
    color: var(--ph-sf-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ph-sf-slot.is-selected,
.ph-sf-slot[aria-pressed="true"] {
    border-color: var(--ph-sf-selected);
    background: var(--ph-sf-selected);
    color: var(--ph-sf-surface);
}

.ph-sf-slot.is-disabled,
.ph-sf-slot:disabled {
    opacity: 0.35;
    cursor: default;
}

.ph-sf-slots__empty,
.ph-sf-slots__hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ph-sf-ink-soft);
}

/*
 * Label casing — the theme uppercases native form labels. Figma has all labels
 * in sentence case, so the override is scoped to these two popups ONLY. Do not
 * widen this selector: the footer newsletter form and other site forms rely on
 * the global uppercase style.
 */
.ph-popup-termin .breakdance-form-field__label,
.ph-popup-termin .ph-sf-label,
.ph-popup-anfrage .breakdance-form-field__label,
.ph-popup-anfrage .ph-sf-label {
    text-transform: none;
    letter-spacing: normal;
}

/* Focus ------------------------------------------------------------------ */

.ph-sf-chip:focus-visible,
.ph-sf-slot:focus-visible,
.ph-sf-select:focus-visible,
.ph-sf-cal__nav:focus-visible,
.ph-sf-cal__day:focus-visible,
.ph-popup-termin .ph-sf-success__close:focus-visible,
.ph-popup-anfrage .ph-sf-success__close:focus-visible {
    outline: 2px solid var(--ph-sf-ink);
    outline-offset: 2px;
}

/* Success state ---------------------------------------------------------- */

/*
 * Everything below is markup this project INJECTS at runtime, so — unlike the
 * mount-based rules, whose elements are authored inside the popups — its location
 * is not structurally guaranteed. Both popups ship site-wide, so these are scoped
 * to the two popup classes rather than trusting the injection site.
 */
.ph-popup-termin .ph-sf-hidden,
.ph-popup-anfrage .ph-sf-hidden {
    display: none !important;
}

.ph-popup-termin .ph-sf-success,
.ph-popup-anfrage .ph-sf-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
    text-align: center;
}

.ph-popup-termin .ph-sf-success__icon,
.ph-popup-anfrage .ph-sf-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/*
 * Rendered as an <h2>. Scoped to the two popups structurally rather than relying
 * on "we only inject it there" — both popups ship site-wide (they are on the home
 * page too), so the scoping is load-bearing. The popup scope also keeps
 * specificity above theme heading rules.
 */
.ph-popup-termin .ph-sf-success__title,
.ph-popup-anfrage .ph-sf-success__title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ph-sf-ink);
}

.ph-popup-termin .ph-sf-success__text,
.ph-popup-anfrage .ph-sf-success__text {
    max-width: 34ch;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ph-sf-ink-soft);
}

.ph-popup-termin .ph-sf-success__close,
.ph-popup-termin .ph-sf-success__close:hover,
.ph-popup-termin .ph-sf-success__close:focus,
.ph-popup-anfrage .ph-sf-success__close,
.ph-popup-anfrage .ph-sf-success__close:hover,
.ph-popup-anfrage .ph-sf-success__close:focus {
    color: var(--ph-sf-ink);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 420px) {
    .ph-sf-calendar {
        padding: 12px;
    }

    .ph-sf-cal__day {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .ph-sf-cal__weekday {
        font-size: 11px;
    }

    .ph-sf-slot {
        padding: 8px 12px;
        font-size: 13px;
    }

    .ph-sf-chip {
        flex: 1 1 auto;
        text-align: center;
    }

    .ph-popup-termin .ph-sf-success,
    .ph-popup-anfrage .ph-sf-success {
        padding: 24px 16px;
    }
}