/* Notfallkontakt-Button – Custom Styling */
.esc-eb-wrap {
    --esc-eb-btn-bg:          #ffe500;
    --esc-eb-btn-color:       #000000;
    --esc-eb-btn-radius:      8px;
    --esc-eb-btn-padding:     0.65em 1.4em;
    --esc-eb-overlay-bg:      rgba(30, 57, 50, 0.75);
    --esc-eb-popup-bg:        #ffffff;
    --esc-eb-popup-radius:    12px;
    --esc-eb-popup-max-width: 480px;
    --esc-eb-popup-padding:   2.25rem;
    --esc-eb-title-color:     #1e3932;
    --esc-eb-text-color:      #444444;
    --esc-eb-error-color:     #c0392b;
    --esc-eb-input-border:    #1e3932;
    --esc-eb-input-radius:    8px;
    --esc-eb-input-padding:   0.65em 0.85em;
    --esc-eb-phone-color:     #1e3932;
    --esc-eb-phone-size:      2.2rem;
    --esc-eb-phone-weight:    700;
}

/* ── Button: schwebend am rechten Rand, 90° gedreht ── */
button.esc-eb-trigger {
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;
    z-index: 99999 !important;
    background-color: #ffe500 !important;
    color: #000000 !important;
    border: none !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    transform: translateY(-50%) rotate(180deg) !important;
    font-family: 'Teko', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding: 32px 18px !important;
    border-radius: 0px 8px 8px 0px !important;
    cursor: pointer;
}

/* ── Telefon-Icon vor dem Text, gleiche Linie ── */
button.esc-eb-trigger::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    vertical-align: middle;
    transform: rotate(180deg);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

button.esc-eb-trigger:hover,
button.esc-eb-trigger:focus-visible {
    filter: brightness(1) !important;
    box-shadow: -4px 0 16px rgba(255, 229, 0, 0.85) !important;
    transition: all 0.2s ease !important;
}

/* ── Wrapper NICHT fixed – damit Overlay frei bleibt ── */
.esc-eb-wrap {
    position: static !important;
}

/* ── Overlay: standardmäßig versteckt ── */
.esc-eb-overlay {
    display: none;
}

/* ── Overlay: sichtbar wenn aktiv, Vollbild, mittig ── */
.esc-eb-overlay[aria-hidden="false"],
.esc-eb-overlay:not([hidden]),
.esc-eb-overlay.active,
.esc-eb-overlay.is-open,
.esc-eb-overlay.show {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Popup-Schatten ── */
.esc-eb-overlay .esc-eb-popup,
.esc-eb-wrap .esc-eb-popup {
    box-shadow: 0 8px 32px rgba(30, 57, 50, 0.25);
}

/* ── Popup-Schriften ── */
.esc-eb-wrap .esc-eb-popup h2,
.esc-eb-wrap .esc-eb-popup h3,
.esc-eb-wrap .esc-eb-popup .esc-eb-title {
    font-family: 'Teko', sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.esc-eb-wrap .esc-eb-popup .esc-eb-phone,
.esc-eb-wrap .esc-eb-popup a[href^="tel"] {
    font-family: 'Teko', sans-serif !important;
}

/* ── Klickbare Telefonnummer: Styling ── */
.esc-eb-wrap .esc-eb-popup a.esc-eb-tel-link {
    color: var(--esc-eb-phone-color, #1e3932);
    text-decoration: none;
    font-family: 'Teko', sans-serif !important;
    font-size: var(--esc-eb-phone-size, 2.2rem);
    font-weight: var(--esc-eb-phone-weight, 700);
}

.esc-eb-wrap .esc-eb-popup a.esc-eb-tel-link:hover {
    text-decoration: underline;
}

/* Fließtext → Work Sans */
.esc-eb-wrap .esc-eb-popup p,
.esc-eb-wrap .esc-eb-popup label,
.esc-eb-wrap .esc-eb-popup input,
.esc-eb-wrap .esc-eb-popup button,
.esc-eb-wrap .esc-eb-popup .esc-eb-close,
.esc-eb-wrap .esc-eb-popup .esc-eb-error {
    font-family: 'Work Sans', sans-serif !important;
}