/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 13 2026 | 09:12:40 */
/*
==============================================================
AX BALANCE – FORMULARE
Contact Form 7 / Blue Planet

Version: 1.3.1 TEST
Stand: 13.09.2026

ZWECK
--------------------------------------------------------------
Zentrale Gestaltung der AX-Balance-Anmeldeformulare:

- Reise
- Workshop
- Singabend / Singangebot

Zusätzlich enthalten:
- automatische Zimmerkategorie bei Reisen
- Zimmerbuchungslogik bei Reisen
- sichtbarer Hinweis bei direkter Zimmerreservierung
- alter Reise-Anmeldebutton für Legacy-Seiten
- Schutz des unsichtbaren Honeypot-Spamfeldes

ÄNDERUNGEN VERSION 1.3.1
--------------------------------------------------------------
- neuer Bereich .ax-selbstbuchung-hinweis
- dieser Bereich ist normalerweise unsichtbar
- bei .axb-zimmerbuchung-selbst wird er eingeblendet
- gleichzeitig bleibt die eigentliche Zimmerauswahl verborgen
- eigene Trennlinie für den Selbstbuchungs-Hinweis
- keine sonstigen gestalterischen Änderungen

WICHTIG
--------------------------------------------------------------
Die zentrale Schriftgröße beträgt 1.4rem.

Keine zusätzliche Regel für
.ax-form-compact .ax-label
anlegen, da dies die bestätigten Label-Abstände überschreiben
könnte.
==============================================================
*/


/* ==========================================================
   1. ZENTRALE DESIGNWERTE
   ========================================================== */

.ax-form {

    --bg: #ffffff;

    --ink: #111827;
    --muted: #6b7280;
    --line: #d1d5db;

    --brand: #006079;
    --brand-hover: #004d61;
    --brand-weak: rgba(0, 96, 121, 0.18);

    --error: #dc2626;

    --text-size: 1.4rem;
    --label-size: 1.4rem;
    --placeholder-size: 1.4rem;
    --legal-text-size: 1.4rem;

    color: var(--ink);

    background: var(--bg);

    font-family: inherit;

    font-size: var(--text-size);

    line-height: 1.4;
}


/* ==========================================================
   2. FORMULAR-CONTAINER
   ========================================================== */

.ax-form--single {

    max-width: 720px;

    margin: 0 auto;

    padding: 24px 16px;

    background: var(--bg);
}


/* ==========================================================
   3. FORMULARABSCHNITTE
   ========================================================== */

.ax-form .ax-section {

    margin: 0;

    padding: 0;
}


/* ==========================================================
   4. ABSCHNITTSÜBERSCHRIFTEN
   ========================================================== */

.ax-form .ax-section-title {

    margin: 0 0 12px;

    padding: 0;

    font-family: inherit;

    font-size: var(--label-size);

    font-weight: 800;

    line-height: 1.25;

    color: var(--ink);
}


/* ==========================================================
   5. TRENNLINIEN
   ========================================================== */

.ax-form .ax-sep {

    border: 0;

    border-top: 1px solid var(--line);

    margin: 18px 0;
}


/* ==========================================================
   6. FELD-CONTAINER
   ========================================================== */

.ax-form .ax-field {

    margin: 0 0 13px;

    padding: 0;
}


/* ==========================================================
   7. FELDBEZEICHNUNGEN / LABELS
   ========================================================== */

.ax-form .ax-label {

    display: block !important;

    margin: 0 0 -10px 0 !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: var(--label-size) !important;

    font-weight: 800 !important;

    line-height: 1.15 !important;

    color: var(--ink) !important;
}


/* ==========================================================
   8. EINGABEFELDER
   ========================================================== */

.ax-form .ax-input,
.ax-form input[type="text"].ax-input,
.ax-form input[type="email"].ax-input,
.ax-form input[type="tel"].ax-input,
.ax-form textarea.ax-input {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 9px 11px !important;

    font-family: inherit !important;

    font-size: var(--text-size) !important;

    line-height: 1.3 !important;

    color: var(--ink) !important;

    background: #ffffff !important;

    border: 1px solid var(--line) !important;

    border-radius: 6px !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ==========================================================
   9. PLATZHALTER
   ========================================================== */

.ax-form .ax-input::placeholder,
.ax-form input.ax-input::placeholder,
.ax-form textarea.ax-input::placeholder {

    font-family: inherit !important;

    font-size: var(--placeholder-size) !important;

    color: var(--muted) !important;

    opacity: 1 !important;
}


/* ==========================================================
   10. FOKUS DER EINGABEFELDER
   ========================================================== */

.ax-form .ax-input:focus {

    outline: none !important;

    border-color: var(--brand) !important;

    box-shadow:
        0 0 0 3px var(--brand-weak) !important;
}


/* ==========================================================
   11. CONTACT FORM 7 WRAPPER
   ========================================================== */

.ax-form .wpcf7-form-control-wrap:not([class*="honeypot-"]) {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;
}


/* ==========================================================
   12. HONEYPOT-SPAMSCHUTZ
   ========================================================== */

.ax-form .wpcf7-form-control-wrap[class*="honeypot-"],
.ax-form [class*="honeypot-"][class*="-wrap"] {

    display: none !important;

    visibility: hidden !important;
}


/* ==========================================================
   13. GRID-LAYOUTS
   ========================================================== */

.ax-form .ax-grid {

    display: grid;

    gap: 12px 14px;
}


.ax-form .ax-grid-2 {

    grid-template-columns: 1fr 1fr;
}


.ax-form .ax-grid-plz {

    grid-template-columns: 140px 1fr;
}


/* ==========================================================
   14. RADIOBUTTONS
   ========================================================== */

.ax-form .ax-radiogroup label {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin: 2px 18px 6px 0 !important;

    font-family: inherit !important;

    font-size: var(--text-size) !important;

    line-height: 1.4 !important;

    cursor: pointer;

    user-select: none;
}


.ax-form input[type="radio"] {

    accent-color: var(--brand);
}


/* ==========================================================
   15. CHECKBOXEN
   ========================================================== */

.ax-form .ax-check {

    display: flex !important;

    align-items: flex-start !important;

    gap: 9px !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: var(--legal-text-size) !important;

    line-height: 1.45 !important;

    color: var(--ink) !important;
}


.ax-form .ax-check label,
.ax-form .ax-check .wpcf7-list-item-label,
.ax-form .ax-consent label,
.ax-form .ax-consent .wpcf7-list-item-label {

    font-family: inherit !important;

    font-size: var(--legal-text-size) !important;

    line-height: 1.45 !important;

    color: var(--ink) !important;
}


.ax-form .ax-check input[type="checkbox"],
.ax-form input[type="checkbox"] {

    accent-color: var(--brand);
}


.ax-form .ax-check input[type="checkbox"] {

    margin-top: 4px;
}


.ax-form .ax-consent {

    margin-bottom: 12px;

    font-family: inherit;

    font-size: var(--legal-text-size) !important;

    line-height: 1.45 !important;
}


/* ==========================================================
   16. CAPTCHA
   ========================================================== */

.ax-form .ax-captcha {

    margin: 0 0 14px;

    padding: 0;
}


.ax-form .ax-captcha-text {

    margin: 6px 0 3px;

    padding: 0;

    font-family: inherit;

    font-size: var(--label-size);

    font-weight: 800;

    line-height: 1.15;

    color: var(--ink);
}


/* ==========================================================
   17. ABSENDEBEREICH
   ========================================================== */

.ax-form .ax-actions {

    margin-top: 16px;
}


/* ==========================================================
   18. ABSENDEBUTTON
   ========================================================== */

.ax-form .ax-btn,
.ax-form input[type="submit"].ax-btn {

    display: inline-block !important;

    padding: 13px 20px !important;

    font-family: inherit !important;

    font-size: var(--text-size) !important;

    font-weight: 800 !important;

    line-height: 1.25 !important;

    color: #ffffff !important;

    background: var(--brand) !important;

    border: 0 !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    transition:
        background 0.2s ease,
        transform 0.05s ease !important;
}


.ax-form .ax-btn:hover,
.ax-form input[type="submit"].ax-btn:hover {

    background: var(--brand-hover) !important;
}


.ax-form .ax-btn:focus,
.ax-form input[type="submit"].ax-btn:focus {

    outline: 3px solid var(--brand) !important;

    outline-offset: 3px !important;
}


.ax-form .ax-btn:active,
.ax-form input[type="submit"].ax-btn:active {

    transform: translateY(1px);
}


/* ==========================================================
   19. ABSCHLUSSTEXT
   ========================================================== */

.ax-form .ax-final-note {

    margin-top: 14px;

    font-family: inherit;

    font-size: var(--legal-text-size) !important;

    font-weight: 700;

    line-height: 1.45 !important;

    color: var(--ink);
}


/* ==========================================================
   20. FEHLERMELDUNGEN
   ========================================================== */

.ax-form .wpcf7-not-valid {

    border-color: var(--error) !important;

    box-shadow:
        0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}


.ax-form .wpcf7-not-valid-tip {

    margin-top: 5px !important;

    font-family: inherit !important;

    font-size: var(--text-size) !important;

    line-height: 1.4 !important;

    color: var(--error) !important;
}


.ax-form .wpcf7-response-output {

    margin-top: 14px !important;

    padding: 10px 12px !important;

    font-family: inherit !important;

    font-size: var(--text-size) !important;

    line-height: 1.4 !important;

    background: #fafafa !important;

    border: 1px solid var(--line) !important;

    border-radius: 6px !important;
}


/* ==========================================================
   21. BLUE PLANET / CF7 ABSATZ-FIX
   ========================================================== */

.ax-form .wpcf7-form p {

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    padding: 0 !important;
}


.ax-form input.ax-input,
.ax-form textarea.ax-input {

    margin: 0 !important;
}


/* ==========================================================
   22. KOMPAKT-VARIANTE
   ========================================================== */

.ax-form-compact .ax-section-title,
.ax-form-compact .ax-captcha-text {

    font-size: var(--label-size) !important;
}


.ax-form-compact .ax-input,
.ax-form-compact input.ax-input,
.ax-form-compact textarea.ax-input {

    font-size: var(--text-size) !important;
}


.ax-form-compact .ax-check,
.ax-form-compact .ax-consent,
.ax-form-compact .ax-final-note,
.ax-form-compact .ax-check label,
.ax-form-compact .ax-check .wpcf7-list-item-label,
.ax-form-compact .ax-consent label,
.ax-form-compact .ax-consent .wpcf7-list-item-label {

    font-size: var(--legal-text-size) !important;

    line-height: 1.45 !important;
}


.ax-form-compact .ax-section-title {

    margin-bottom: 12px !important;
}


.ax-form-compact .ax-field {

    margin-bottom: 13px !important;
}


.ax-form-compact .wpcf7-form-control-wrap:not([class*="honeypot-"]) {

    margin: 0 !important;
}


.ax-form-compact .ax-input,
.ax-form-compact input.ax-input,
.ax-form-compact textarea.ax-input {

    margin: 0 !important;
}


/* ==========================================================
   23. AUTOMATISCHE ZIMMERKATEGORIE
   ========================================================== */

.ax-zimmerkategorie-nein .ax-zimmerkategorie-bereich {

    display: none !important;
}


.ax-ohne-zimmerkategorie-bereich {

    display: none !important;
}


.ax-zimmerkategorie-nein .ax-ohne-zimmerkategorie-bereich {

    display: block !important;
}


/* ==========================================================
   24. ART DER ZIMMERBUCHUNG
   ========================================================== */

/*
 * Standard:
 * Der Hinweis für Selbstbucher ist unsichtbar.
 */
.ax-selbstbuchung-hinweis,
.ax-selbstbuchung-trenner {

    display: none !important;
}


/*
 * Bei direkter Reservierung bei der Unterkunft:
 * komplette AX-Balance-Zimmerauswahl ausblenden.
 */
.axb-zimmerbuchung-selbst .ax-zimmerauswahl-bereich,
.axb-zimmerbuchung-selbst .ax-zimmerauswahl-trenner {

    display: none !important;
}


/*
 * Stattdessen den Hinweis zur eigenen Zimmerreservierung
 * und die dazugehörige Trennlinie anzeigen.
 */
.axb-zimmerbuchung-selbst .ax-selbstbuchung-hinweis {

    display: block !important;
}


.axb-zimmerbuchung-selbst .ax-selbstbuchung-trenner {

    display: block !important;
}


/* ==========================================================
   25. LEGACY – ALTER REISE-ANMELDEBUTTON
   ========================================================== */

.reise-anmelde-button {

    display: inline-block;

    margin-top: 20px;

    margin-bottom: 24px;

    padding: 14px 28px;

    font-family: inherit;

    font-size: 1.4rem;

    font-weight: 700;

    line-height: 1.25;

    text-align: center;

    text-decoration: none !important;

    color: #ffffff !important;

    background-color: #006079;

    border-radius: 7px;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.reise-anmelde-button:hover {

    color: #ffffff !important;

    background-color: #004d61;

    text-decoration: none !important;

    transform: translateY(-1px);
}


.reise-anmelde-button:focus {

    outline: 3px solid #006079;

    outline-offset: 3px;
}


/* ==========================================================
   26. MOBILE OPTIMIERUNG
   ========================================================== */

@media screen and (max-width: 640px) {


    .ax-form--single {

        padding: 16px;
    }


    .ax-form .ax-grid,
    .ax-form .ax-grid-2,
    .ax-form .ax-grid-plz {

        grid-template-columns: 1fr;

        gap: 0;
    }


    .ax-form .ax-field {

        margin-bottom: 14px !important;
    }


    .ax-form .ax-btn,
    .ax-form input[type="submit"].ax-btn {

        width: 100%;

        text-align: center;
    }


    .reise-anmelde-button {

        box-sizing: border-box;

        width: 100%;

        padding-top: 16px;

        padding-bottom: 16px;

        font-size: 1.4rem;
    }

}