.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance
}

.tm-headerbar-default {
    background: url('https://everbelle.asm-webdesign.de/wp-content/uploads/2025/08/header.webp') 50% 50% no-repeat !important;
    background-size: cover !important;
}

/* Gutschein-Formular */

.uk-form-label {
    display: block;
}

.input-container {
    position: relative;
}

.input-container .wpcf7-form-control {
    padding-top: 6px;
    transition: border-color .2s, box-shadow .2s;
}

.input-container .uk-form-label {
    position: absolute;
    left: 14px;
    top: 12px;
    padding: 0 2px;
    background: #fff;
    /* verdeckt den Input-Rand unter dem Label */
    pointer-events: none;
    /* Label blockiert keine Klicks */
    z-index: 1;
    transition: top .2s, font-size .2s, color .2s;
}

.input-container .wpcf7-form-control:focus {
    border: 2px solid red;
}

.input-container:focus-within .uk-form-label {
    top: -10px;
    color: #ff62c6;
    font-size: 13px;
}

.input-container .wpcf7-form-control-wrap:has(.wpcf7-form-control:not(:placeholder-shown))+.uk-form-label {
    top: -10px;
    color: #ff62c6;
    font-size: 13px;
}

.input-container .wpcf7-form-control::placeholder {
    opacity: 0;
    transition: opacity .2s;
    font-size: 16px;
}

.input-container .wpcf7-form-control:focus::placeholder {
    opacity: 0;
}

.input-container .uk-textarea {
    height: 120px;
}

/* Farben anpassen, #1e87f0 ist UIkit-Primary */
.betrag-container {
    --accent: #ff62c6;
    --border: #dfe3e8;
    --text: #111;
}


/* Die Radio-Gruppe als Flex-Row */
.betrag-container .wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 15px;
    margin-bottom: 15px;
}

@media (min-width: 960px) {
    .betrag-container .wpcf7-radio {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Einzelne Items neutralisieren */
.betrag-container .wpcf7-list-item {
    margin: 0;
    padding: 0;
    display: contents;
    /* sorgt dafür, dass nur das Label "sichtbar" ist */
}

/* Input visuell verstecken, aber fokussierbar lassen (A11y) */
.betrag-container input[type="radio"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Sichtbarer Button: das Span im Label */
.betrag-container .wpcf7-list-item label .wpcf7-list-item-label {
    display: inline-block;
    padding: .6rem 1rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    background: #efefef;
    color: var(--text);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .04s;
    line-height: 1;
    min-width: 5ch;
    text-align: center;
    width: -webkit-fill-available;
}

/* Hover/Active Feedback */
.betrag-container .wpcf7-list-item label:hover .wpcf7-list-item-label {
    border-color: #cbd2da;
}

.betrag-container .wpcf7-list-item label:active .wpcf7-list-item-label {
    transform: translateY(1px);
}

/* Tastaturfokus vom (versteckten) Input auf das sichtbare Label übertragen */
.betrag-container input[type="radio"]:focus-visible+.wpcf7-list-item-label {
    outline: 3px solid color-mix(in oklab, var(--accent) 50%, white 50%);
    outline-offset: 2px;
    border-radius: .5rem;
}

/* Ausgewählter Zustand */
.betrag-container input[type="radio"]:checked+.wpcf7-list-item-label {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Deaktivierte Option (falls genutzt) */
.betrag-container input[type="radio"]:disabled+.wpcf7-list-item-label {
    opacity: .55;
    cursor: not-allowed;
}

.behandlungen-container .wpcf7-list-item {
    width: 100%;
}

.voucherForm .uk-h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.voucherForm .uk-h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

/* Kontaktformular */
.contactForm .uk-textarea {
    height: 158px;
}

/* Contact Form 7 */
.wpcf7-list-item {
    display: inline-block;
    margin: 0;
}

.wpcf7-spinner {
    display: none;
}

.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 12px;
    font-weight: normal;
    display: block;
}

/* Standard: nichts zeigen */
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
    display: none;
}

/* Nach dem ersten fehlgeschlagenen Submit sichtbar machen */
.wpcf7 form.cf7-show-errors .wpcf7-not-valid-tip {
    display: block;
}

.wpcf7 form.cf7-show-errors .wpcf7-response-output {
    display: block;
}

/* Rote Markierung erst dann aktivieren */
.wpcf7 form.cf7-show-errors .wpcf7-form-control[aria-invalid="true"] {
    border-color: #e53935;
}


/* Scope optional auf dein mobiles Menü, z.B. [data-accordion-nav] */
@media (max-width: 1024px) {

    .uk-parent>.uk-nav-sub,
    .uk-parent>.uk-sub-nav {
        /* WICHTIG: nie display:none, sonst ist scrollHeight = 0 */
        display: block !important;
        overflow: hidden;
        height: 0;
        opacity: 0;
        padding: 0px 0px 0px 15px;
        visibility: hidden;
        transition: height var(--submenu-speed, 280ms) ease,
            opacity var(--submenu-speed, 280ms) ease;
    }

    .uk-parent.is-open>.uk-nav-sub,
    .uk-parent.is-open>.uk-sub-nav {
        visibility: visible;
        padding: 10px 0px 10px 15px;
    }

    .uk-parent>a.has-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .submenu-toggle {
        display: inline-flex;
        width: 24px;
        height: 24px;
        cursor: pointer;
        user-select: none;
    }

    .submenu-toggle .icon-minus {
        display: none !important;
    }

    .uk-parent.is-open>a .submenu-toggle .icon-plus {
        display: none !important;
    }

    .uk-parent.is-open>a .submenu-toggle .icon-minus {
        display: inline !important;
    }

    @media (prefers-reduced-motion: reduce) {

        .uk-parent>.uk-nav-sub,
        .uk-parent>.uk-sub-nav {
            transition: none !important;
        }
    }
}