/* ==========================================================================
   WhatsApp Chat Bubble — WhatsApp-Look
   ========================================================================== */

#wcb-container {
    position: fixed;
    bottom: 24px;
    /* Immer vor sticky Theme-Nav (z=999) und Pre-Header-Dropdown (z=5000),
       auf jedem Viewport. */
    z-index: 5500;
    font-family: "Satoshi-Medium", Helvetica, Arial, sans-serif;
}

#wcb-container.wcb-bottom-right { right: 24px; }
#wcb-container.wcb-bottom-left  { left: 24px; }

/* --------------------------------------------------------------------------
   Bubble (zugeklappt)
   -------------------------------------------------------------------------- */
.wcb-bubble {
    position: relative;
    z-index: 2;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    background: var(--wcb-primary, #25D366);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Entry-Choreographie (kompakt):
       0–.5s    nichts sichtbar (`both` greift den 0%-State)
       .5–1.1s  Bubble: Pop-Out aus scale(0) mit Squash/Stretch in der Stelle
       1.1–2.1s Halo-Pulse als Pseudo-Element
       1.1–1.45s Badge: pop-up mit overshoot
       1.45s+   Badge-Pulse loop */
    animation: wcbBubbleEntry .6s linear .5s both;
}

/* Halo auf Pseudo-Element — lässt das Bubble's eigenes box-shadow für :hover
   unangetastet. */
.wcb-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wcb-primary, #25D366);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    animation: wcbBubbleHalo 1s ease-out 1.1s 1 both;
}

/* In-Place Spring-Bounce — startet aus scale(0) "von hinten", popt nach
   vorne mit Overshoot, federt in der Stelle mit abklingender squash/stretch
   aus. Keine translateY-Bewegung, Zentrum bleibt fixiert. */
@keyframes wcbBubbleEntry {
    0% {
        opacity: 0;
        transform: scale(0);
        animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    }
    25% {
        opacity: 1;
    }
    45% {
        /* maximaler Pop-Out: Overshoot über die Endgröße hinaus */
        transform: scale(1.22);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
    56% {
        /* Squash horizontal — Aufprall-Effekt */
        transform: scale(1.22, .78);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    }
    68% {
        /* Stretch vertikal — Federn nach oben */
        transform: scale(.84, 1.18);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
    79% {
        /* Zweite, kleinere Squash */
        transform: scale(1.08, .94);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    }
    89% {
        /* Mini-Stretch */
        transform: scale(.96, 1.04);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wcbBubbleHalo {
    0%   { opacity: .55; transform: scale(1);   }
    100% { opacity: 0;   transform: scale(2.1); }
}

.wcb-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* Wenn der Chat geöffnet wird (egal wie — User-Click oder Tab-Trick),
   sofort den finalen Sichtbarkeits-State erzwingen. Sonst sieht der User
   ein schwebendes Chatbox ohne Bubble darunter, falls openChat in den
   ersten ~2s feuert (während die Entry-Animation noch läuft). */
#wcb-container.wcb-shown .wcb-bubble {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
#wcb-container.wcb-shown .wcb-bubble::before {
    animation: none !important;
    opacity: 0 !important;
}
#wcb-container.wcb-shown .wcb-badge {
    opacity: 1 !important;
    transform: none !important;
    animation: wcbBadgePulse 1.8s infinite cubic-bezier(.66, 0, 0, 1) !important;
}

/* Reduced-Motion: Animationen skippen, Bubble + Badge einfach reinblenden */
@media (prefers-reduced-motion: reduce) {
    .wcb-bubble {
        animation: wcbBubbleFadeIn .25s ease-out .5s both;
    }
    .wcb-bubble::before {
        animation: none;
        opacity: 0;
    }
    .wcb-badge {
        animation: wcbBubbleFadeIn .25s ease-out 1.1s both;
    }
    @keyframes wcbBubbleFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

.wcb-bubble:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .35);
    outline-offset: 3px;
}

.wcb-bubble-icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.wcb-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    transform-origin: 50% 50%;
    /* Hidden-State explizit als static — robust gegen Edge-Cases mit
       `fill-mode: both` und mehreren animations am gleichen Element. */
    opacity: 0;
    transform: scale(0);
    /* Entry erst NACH Bubble-Landung (1.1s = .5s delay + .6s entry).
       Pulse-Loop startet danach (1.45s) und läuft endlos. */
    animation:
        wcbBadgeEntry .4s cubic-bezier(.34, 1.7, .64, 1) 1.1s forwards,
        wcbBadgePulse 1.8s cubic-bezier(.66, 0, 0, 1) 1.45s infinite;
}

@keyframes wcbBadgeEntry {
    0%   { opacity: 0; transform: scale(0); }
    55%  { opacity: 1; transform: scale(1.45) rotate(12deg); }
    80%  { opacity: 1; transform: scale(.9)   rotate(-4deg); }
    100% { opacity: 1; transform: scale(1)    rotate(0); }
}

@keyframes wcbBadgePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6), 0 0 0 2px #fff; }
    70%  { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0), 0 0 0 2px #fff; }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0), 0 0 0 2px #fff; }
}

/* Icons in der Bubble — Toggle zwischen WhatsApp und X */
.wcb-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, opacity .25s ease;
}

/* Default geschlossen: WhatsApp sichtbar, X versteckt */
.wcb-icon-wa {
    transform: scale(1) rotate(0);
    opacity: 1;
    pointer-events: auto;
}

.wcb-icon-x {
    transform: scale(0) rotate(-90deg);
    opacity: 0;
    pointer-events: none;
}

/* Geöffnet: X sichtbar, WhatsApp versteckt */
#wcb-container.wcb-open .wcb-icon-wa {
    transform: scale(0) rotate(90deg);
    opacity: 0;
    pointer-events: none;
}

#wcb-container.wcb-open .wcb-icon-x {
    transform: scale(1) rotate(0);
    opacity: 1;
    pointer-events: auto;
}

#wcb-container.wcb-open .wcb-badge {
    display: none;
}

/* --------------------------------------------------------------------------
   Chat-Box
   -------------------------------------------------------------------------- */
.wcb-chatbox {
    position: absolute;
    z-index: 1;
    bottom: 76px; /* Platz für die Bubble darunter (60px + 16px Gap) */
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 530px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(.85) translateY(20px);
    transform-origin: bottom right;
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}

#wcb-container.wcb-bottom-right .wcb-chatbox { right: 0; transform-origin: bottom right; }
#wcb-container.wcb-bottom-left  .wcb-chatbox { left: 0;  transform-origin: bottom left; }

#wcb-container.wcb-open .wcb-chatbox {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Header (WhatsApp-Stil: dunkelgrün mit Avatar + Name + Status)
   -------------------------------------------------------------------------- */
.wcb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--wcb-header-bg, #075E54);
    color: var(--wcb-header-text, #fff);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    z-index: 2;
}

.wcb-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    display: block;
    background: #fff;
    flex-shrink: 0;
}

.wcb-avatar-placeholder { background: #fff; }

.wcb-agent-meta { flex: 1; min-width: 0; line-height: 1.25; }
.wcb-agent-name { display: block; font-size: 15px; font-weight: 600; }

.wcb-agent-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    opacity: .9;
}

.wcb-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}

/* --------------------------------------------------------------------------
   Body — WhatsApp-Doodle-Hintergrund
   -------------------------------------------------------------------------- */
.wcb-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px;
    background-color: #ECE5DD;
    /* dezentes Pattern aus kleinen Symbolen */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%23d9cfc2' fill-opacity='0.45'><circle cx='30' cy='40' r='2'/><circle cx='150' cy='90' r='1.5'/><circle cx='90' cy='160' r='2'/><circle cx='180' cy='30' r='1.5'/><circle cx='50' cy='120' r='1.5'/><path d='M120 50 l4 0 l-2 4 z'/><path d='M70 80 l3 0 l-1.5 3 z'/><path d='M160 150 l4 0 l-2 4 z'/></g></svg>");
    background-repeat: repeat;
    /* Top-Anchoring: Chat startet oben und bleibt oben — kein Auto-Scroll. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Scrollbar dezent */
.wcb-body::-webkit-scrollbar { width: 6px; }
.wcb-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.wcb-body::-webkit-scrollbar-track { background: transparent; }

.wcb-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Message-Bubble (eingehend = links / agent)
   -------------------------------------------------------------------------- */
.wcb-msg,
.wcb-typing {
    position: relative;
    align-self: flex-start;
    max-width: 85%;
    background: #fff;
    color: var(--wcb-message-text, #303030);
    padding: 7px 10px 6px 12px;
    border-radius: 8px;
    border-top-left-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    font-size: 14px;
    line-height: 1.4;
    margin-left: 8px;
    word-wrap: break-word;
}

/* Tail (Pfeil) für eingehende Bubbles */
.wcb-tail-in {
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 13px;
    background: #fff;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.wcb-msg-text {
    display: block;
    white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   Typing-Indicator (drei animierte Punkte)
   -------------------------------------------------------------------------- */
.wcb-typing {
    padding: 10px 14px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

.wcb-typing-dots {
    display: inline-flex;
    gap: 4px;
}

.wcb-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b0b0b0;
    animation: wcbBlink 1.2s infinite ease-in-out;
}
.wcb-typing-dots span:nth-child(2) { animation-delay: .2s; }
.wcb-typing-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes wcbBlink {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   Outgoing Bubble (Form als ausgehende Nachricht in Whatsapp-Optik)
   -------------------------------------------------------------------------- */
.wcb-bubble-out {
    position: relative;
    align-self: flex-end;
    max-width: 92%;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 8px;
    background: #DCF8C6; /* klassisches WhatsApp-Outgoing-Grün */
    border-radius: 8px;
    border-top-right-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    padding: 10px 12px;
    margin-left:auto
}

.wcb-tail-out {
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 13px;
    background: #DCF8C6;
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

/* User-Nachricht als ausgehende Bubble (nach Composer-Submit) — kleiner
   als die Form-Bubble, nur Text. */
.wcb-msg-out {
    position: relative;
    align-self: flex-end;
    max-width: 85%;
    background: #DCF8C6;
    color: #303030;
    padding: 7px 10px 6px 12px;
    border-radius: 8px;
    border-top-right-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    font-size: 14px;
    line-height: 1.4;
    margin-left: auto;
    margin-right: 8px;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.wcb-msg-out .wcb-msg-text { display: block; white-space: pre-wrap; }

/* Erfolgs-Label nach Form-Submit */
.wcb-success-label {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #128C7E;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    animation: wcbBubbleIn .25s ease-out;
}

.wcb-success-label svg {
    flex-shrink: 0;
}

.wcb-form-inner { font-size: 13px; }
.wcb-form-inner .gform_validation_errors{
    display:none !important;
}
.wcb-no-form {
    align-self: center;
    color: #888;
    font-size: 13px;
    font-style: italic;
    background: #fff8d6;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Einblende-Animation für Bubbles
   -------------------------------------------------------------------------- */
.wcb-bubble-in,
.wcb-bubble-in-anim {
    animation: wcbBubbleIn .25s ease-out;
}

@keyframes wcbBubbleIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Form-Reveal: nur Opacity (kein Scale/Translate), damit der Compositor
   den ganzen Form-Tree nicht pro Frame neu zeichnen muss → wirkt
   smoother als wcb-bubble-in-anim auf komplexem GF-DOM. */
.wcb-form-reveal {
    animation: wcbFormFadeIn .35s ease-out both;
}

@keyframes wcbFormFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Composer (Pre-Form-Step): Textarea als ausgehende Bubble. Nutzer schreibt
   die Nachricht hier — Text wird beim Submit ins versteckte Form-Feld
   übernommen, das eigentliche Formular wird dadurch um die Textarea kürzer.
   -------------------------------------------------------------------------- */
.wcb-composer-wrap {
    padding: 6px 8px;
}

.wcb-composer-input {
    width: 100%;
    min-height: 80px;
    max-height: 180px;
    border: 0;
    background: transparent;
    color: #303030;
    font-size: 16px;
    line-height: 1.4;
    padding: 4px 4px 2px;
    resize: none;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    display: block;
}

.wcb-hidden { display: none !important; }

/* (Footer/Floating-Close entfernt – Bubble selbst dient als Toggle) */

/* --------------------------------------------------------------------------
   Gravity Forms innerhalb der ausgehenden Bubble
   -------------------------------------------------------------------------- */
.wcb-form-inner .gform_wrapper { margin: 0 !important; }
.wcb-form-inner .gform_wrapper .gform_heading,
.wcb-form-inner .gform_wrapper .gform_title,
.wcb-form-inner .gform_wrapper .gform_description { display: none !important; }

.wcb-form-inner .gform_wrapper form,
.wcb-form-inner .gform_wrapper .gform_body,
.wcb-form-inner .gform_wrapper .gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
}

.wcb-form-inner .gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
}

/* Floating-Label (Theme-Klasse .form-floating greift): Label sitzt absolut
   im Input. Padding-Top schafft Platz für den hochgefloateten Label-State,
   damit Label und Wert nicht kollidieren. */
.wcb-form-inner .gform_wrapper .gfield_label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7c70 !important;
    left: 12px !important;
    pointer-events: none;
}

.wcb-form-inner .gform_wrapper .gfield_label.descup {
    top: 2px !important;
    transform: scale(0.7) !important;
}

.wcb-form-inner .gform_wrapper input[type="text"],
.wcb-form-inner .gform_wrapper input[type="email"],
.wcb-form-inner .gform_wrapper input[type="tel"],
.wcb-form-inner .gform_wrapper input[type="number"],
.wcb-form-inner .gform_wrapper input[type="url"],
.wcb-form-inner .gform_wrapper textarea,
.wcb-form-inner .gform_wrapper select {
    width: 100% !important;
    padding: 13px 12px 3px !important;
    border: 1px solid #c5e0c8 !important;
    border-radius: 5px !important;
    font-size: 16px !important; /* min. 16px verhindert iOS-Auto-Zoom beim Fokus */
    line-height: 1.25 !important;
    background: #fff !important;
    color: #303030 !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wcb-form-inner .gform_wrapper input:focus,
.wcb-form-inner .gform_wrapper textarea:focus,
.wcb-form-inner .gform_wrapper select:focus {
    border-color: var(--wcb-primary, #25D366) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .15) !important;
}

.wcb-form-inner .gform_wrapper textarea {
    resize: vertical;
}

/* Nachricht-Textarea: kompakt by default, expandiert bei Fokus.
   display:block killt den Chrome-Baseline-Descender — sonst hängt
   unterhalb des Border ein paar Pixel weißer Streifen ("Balken"),
   weil <textarea> default inline-block + vertical-align:baseline ist. */
.wcb-form-inner .gform_wrapper .gfield--type-textarea textarea,
.wcb-form-inner .gform_wrapper .ginput_container_textarea textarea {
    display: block;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    transition: height .2s ease, max-height .2s ease, min-height .2s ease,
                border-color .15s ease, box-shadow .15s ease;
}
.wcb-form-inner .gform_wrapper .gfield--type-textarea textarea:focus,
.wcb-form-inner .gform_wrapper .ginput_container_textarea textarea:focus {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
}

.wcb-form-inner .gform_wrapper .gfield_required { color: #d9534f; margin-left: 2px; }

.wcb-form-inner .gform_wrapper .gfield_validation_message,
.wcb-form-inner .gform_wrapper .validation_message {
    color: #c92a2a !important;
    font-size: 11.5px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 2px 0 0 !important;
}

/* Live-Validation-Messages aus dem theme-eigenen form-validation.js
   (Klasse `.validation-message` mit Bindestrich — anderer Selector als die
   GF-nativen Messages oben). */
.wcb-form-inner .validation-message {
    font-size: 13px !important;
    line-height: 1.35;
    color: #c92a2a;
    margin: 4px 0 0;
}

/* --------------------------------------------------------------------------
   Consent-Field (Custom Checkbox)
   GF rendert: <fieldset class="gfield--type-consent"> mit hidden_label-legend
   + <input type="checkbox"> + <label.gfield_consent_label>Text…</label>
   -------------------------------------------------------------------------- */
.wcb-form-inner .gform_wrapper .gfield--type-consent {
    border: 0 !important;
    padding: 4px 0 0 !important;
}
.wcb-form-inner .gform_wrapper .gfield--type-consent > .gfield_label {
    /* hidden_label-Klasse setzt das schon, aber GF default zeigt den legend
       je nach Theme-Reset zurück → hart ausblenden */
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.wcb-form-inner .gform_wrapper .ginput_container_consent {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Native Checkbox visuell verstecken, aber für AT/Tastatur erreichbar */
.wcb-form-inner .gform_wrapper .ginput_container_consent input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* Custom Box als ::before auf dem Consent-Label.
   pointer-events bleiben am Label, Klick toggelt nativ die Checkbox. */
.wcb-form-inner .gform_wrapper .gfield_consent_label {
    position: relative;
    display: block;
    padding-left: 26px;        /* 18px Box + 8px Gap */
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #6b7c70 !important;
    cursor: pointer;
    margin: 0 !important;
}
.wcb-form-inner .gform_wrapper .gfield_consent_label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #c5e0c8;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wcb-form-inner .gform_wrapper .gfield_consent_label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform .15s ease;
}
/* Checked-State */
.wcb-form-inner .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked + .gfield_consent_label::before {
    background: var(--wcb-primary, #25D366);
    border-color: var(--wcb-primary, #25D366);
}
.wcb-form-inner .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked + .gfield_consent_label::after {
    transform: rotate(45deg) scale(1);
}
/* Focus-Ring (Tastatur-Navigation) */
.wcb-form-inner .gform_wrapper .ginput_container_consent input[type="checkbox"]:focus-visible + .gfield_consent_label::before {
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .25);
    border-color: var(--wcb-primary, #25D366);
}
.wcb-form-inner .gform_wrapper .gfield_consent_label .gfield_required {
    font-size: 12px !important;
}
.wcb-form-inner .gform_wrapper .gform_validation_errors,
.wcb-form-inner .gform_wrapper .validation_error {
    background: rgba(217, 83, 79, .1) !important;
    border: 1px solid rgba(217, 83, 79, .25) !important;
    color: #b04141 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    margin-bottom: 8px !important;
}

/* Wenn der Form-Wrap das Form enthält, nimmt er die volle Body-Breite —
   sonst lassen die `.wcb-bubble-out`-Constraints (max-width:92%, margin) den
   sticky Footer nicht an die Chatbox-Ränder. */
.wcb-form-wrap.wcb-bubble-out {
    max-width: 100%;
    align-self: stretch;
    margin-right: 0;
    margin-left: 0;
}

/* Form-Footer (mit Submit-Button) sticky am Boden des body-Scrollbereichs.
   Negative Margins kompensieren:
     • bubble-out padding (10px 12px)
     • body padding (14px 12px)
   damit der Footer Chatbox-Edge-to-Edge sitzt, ohne Space L/R/Bottom.
   padding-bottom auf form sorgt dafür, dass Fields nicht unter dem Footer
   verschwinden, wenn body scrollt. */
.wcb-form-inner .gform_wrapper form {
    padding-bottom: 64px !important;
}
.wcb-form-inner .gform_wrapper .gform_footer,
.wcb-form-inner .gform_footer {
    position: fixed;
    bottom: 0px !important;
    margin: 0px -25px !important;
    width:calc(100% + 0px)!important;
    padding: 12px 14px 14px !important;
    background: #f7f7f5 !important;
    border-top: 1px solid rgba(0, 0, 0, .06) !important;
    z-index: 3;
}
.wcb-form-inner .gform_button{
    margin: 0!important;
}

.wcb-form-inner .gform_button,
.wcb-form-inner input[type="submit"].gform_button {
    width: 100% !important;
    background: var(--wcb-primary, #25D366) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 11px 18px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter .2s ease, transform .1s ease, opacity .15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    font-family: inherit;
}

.wcb-form-inner .gform_button:hover,
.wcb-form-inner input[type="submit"].gform_button:hover {
    filter: brightness(.95);
}

.wcb-form-inner .gform_button:active {
    transform: translateY(1px);
}

/* Loading-Indicator (`.form-overlay` von form-validation.js, ins
   .gform_footer eingehängt während des Submits). Theme-Default ist gelb +
   18px Black-Uppercase — passt nicht in den Chat. Hier mit Plugin-Look
   überschreiben: Submit-Button-Optik mit weißem Spinner + dezentem Text. */
.wcb-form-inner #loading-indicator.form-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: var(--wcb-primary, #25D366) !important;
    border-radius: 8px !important;
    border: 0 !important;
    cursor: progress !important;
    /* Footer hat 14px padding → Overlay nur über dem Button */
    top: 12px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
}
.wcb-form-inner #loading-indicator.form-overlay > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
}
.wcb-form-inner #loading-indicator .spinner {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, .35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: spin .7s linear infinite !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.wcb-form-inner #loading-indicator .loading-text {
    color: #fff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Native GF-Confirmation hard-hidden — die Chat-Bubble zeigt die eigene
   Danke-Nachricht via `handleSubmitSuccess` (config.thankYou). Würden beide
   gleichzeitig sichtbar sein, kommt es zu einer Doppelmeldung im Chat. */
.wcb-form-inner .gform_confirmation_message,
.wcb-form-inner #gform_confirmation_wrapper,
.wcb-form-inner [id^="gform_confirmation_wrapper_"],
.wcb-form-inner [id^="gform_confirmation_message_"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Already-Submitted-Ansicht (Chat zeigt nur Erfolgs-Hinweis)
   -------------------------------------------------------------------------- */
.wcb-already-submitted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px 16px;
    animation: wcbBubbleIn .3s ease-out;
}

.wcb-already-submitted .wcb-success-label {
    font-size: 13px;
    padding: 8px 14px;
}

.wcb-html-block {
    background: #fff;
    color: var(--wcb-message-text, #303030);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 8px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    word-wrap: break-word;
}
.wcb-html-block p:first-child { margin-top: 0; }
.wcb-html-block p:last-child  { margin-bottom: 0; }
.wcb-html-block a {
    color: #128C7E;
    text-decoration: underline;
}
.wcb-html-block-already-submitted {
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Eigenständige Block-Designs (Gratis-Checks & Marketing-Tipps)
   -------------------------------------------------------------------------- */
.wcb-checks,
.wcb-tipps {
    color: #1d1d1d;
    font-size: 14px;
    line-height: 1.4;
}

.wcb-checks-intro,
.wcb-tipps-intro {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #1d1d1d;
}
.wcb-checks-intro strong,
.wcb-tipps-intro strong { font-weight: 700; }

/* Check-Liste */
.wcb-checks-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wcb-checks-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.wcb-checks-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #FEC600;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}
.wcb-checks-label {
    flex: 1;
    background: #EEF1F4;
    color: #1d1d1d;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 500;
}
.wcb-checks-list a:hover .wcb-checks-label {
    background: #e3e8ed;
}

/* Icon-Set (inline SVG als data-URI, da <svg> in HTML-Block via wp_kses_post
   gestrippt würde). */
.wcb-icon-sichtbar {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v4M12 18v4M2 12h4M18 12h4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/><circle cx='12' cy='12' r='3'/></svg>");
}
.wcb-icon-ki {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 2l1.7 4.6L18 8l-4.3 1.4L12 14l-1.7-4.6L6 8l4.3-1.4L12 2zm6 10l1 2.6 2.6 1-2.6 1L18 19l-1-2.4L14.4 15.6 17 14.6 18 12zM6 14l1 2.4 2.4 1L7 18.4 6 21l-1-2.6L2.4 17.4 5 16.4 6 14z'/></svg>");
}
.wcb-icon-monitor {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='13' rx='2'/><path d='M8 21h8M12 17v4'/></svg>");
}
.wcb-icon-seo {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
}

/* Marketing-Tipps Slider (Legacy — alter Slider, derzeit nicht verwendet,
   bleibt drin falls ein zukünftiger Block den Scroller erneut braucht) */
.wcb-tipps-scroller {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px 10px;     /* bricht aus dem Block-Padding aus */
    padding: 0 14px 4px;
}
.wcb-tipps-scroller::-webkit-scrollbar { display: none; }

/* Marketing-Tipps Grid (2 Spalten Desktop, 1 Spalte Mobile) */
.wcb-tipps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 10px;
}
@media (max-width: 480px) {
    .wcb-tipps-grid { grid-template-columns: 1fr; }
}

.wcb-tipps-card {
    background: #EEF1F4;
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
}
/* Wenn der Card im Scroller-Layout liegt: feste Spaltenbreite + Snap */
.wcb-tipps-scroller .wcb-tipps-card {
    flex: 0 0 calc(50% - 5px);
    scroll-snap-align: start;
}
.wcb-tipps-card a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #1d1d1d;
}
.wcb-tipps-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: #FEC600;
    /* Kreis-Mask wie im Screenshot: gelber Hintergrund mit halbtransparentem
       weißem Kreis links unten. Bilder lassen sich später per `background-image`
       inline im HTML-Block überschreiben. */
    background-image:
        radial-gradient(circle at 30% 75%, rgba(255,255,255,.85) 0 38%, transparent 40%);
}
.wcb-tipps-card img.wcb-tipps-img {
    background: none;
    object-fit: cover;
}
.wcb-tipps-title {
    display: block;
    padding: 8px 10px 12px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}

.wcb-tipps-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 12px;
}
.wcb-tipps-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6dde3;
    transition: background .2s ease;
}
.wcb-tipps-dots span.is-active {
    background: #FEC600;
}

/* Gemeinsame CTA-Schaltfläche im WhatsApp-Style */
.wcb-cta-btn {
    display: block;
    text-align: center;
    background: #FEC600;
    color: #1d1d1d !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 4px;
}
.wcb-cta-btn:hover {
    background: #ecb800;
}

/* --------------------------------------------------------------------------
   Attention Message — vollflächig grün, modern, auffällig
   -------------------------------------------------------------------------- */
.wcb-attention {
    position: absolute;
    bottom: 86px;
    z-index: 1;
    width: 240px;
    max-width: calc(100vw - 48px);
    padding: 12px 36px 15px 25px;
    background: var(--wcb-primary, #25D366);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    /*! letter-spacing: -.005em; */
    border-radius: 20px;
    box-shadow:
        0 14px 38px rgba(7, 94, 84, .2),
        0 4px 14px rgba(0, 0, 0, .1);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.92);
    transition: opacity .28s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1);
    user-select: none;
    /* Layout: 👋 als großes Icon links, Text rechts */
    display: flex;
    align-items: stretch;
    gap: 14px;
}

/* 👋-Emoji als eigenständiges Flex-Item — füllt die volle Höhe der Bubble */
.wcb-attention::before {
    content: "👋";
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    line-height: 1;
    transform-origin: 70% 70%;
    animation: wcbWave 2.4s ease-in-out 1.4s infinite;
}

#wcb-container.wcb-bottom-right .wcb-attention {
    right: 6px;
    transform-origin: bottom right;
}

#wcb-container.wcb-bottom-left .wcb-attention {
    left: 6px;
    transform-origin: bottom left;
}

/* Tail nach unten zeigend — selbe grüne Farbe wie die Bubble */
.wcb-attention::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 14px;
    height: 18px;
    background: var(--wcb-primary, #25D366);
}
#wcb-container.wcb-bottom-right .wcb-attention::after {
    right: 22px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#wcb-container.wcb-bottom-left .wcb-attention::after {
    left: 22px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.wcb-attention.wcb-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    /* Idle-Animation startet erst nach der Entry-Transition */
    /*! animation: wcbAttentionFloat 3.2s 1s ease-in-out infinite; */
}

/* Sanftes Bobbing + Glow-Pulse */
@keyframes wcbAttentionFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 14px 38px rgba(7, 94, 84, .26),
            0 4px 14px rgba(0, 0, 0, .14),
            0 0 0 0 rgba(37, 211, 102, .45);
    }
    50% {
        transform: translateY(-4px) scale(1.018);
        box-shadow:
            0 22px 50px rgba(7, 94, 84, .32),
            0 8px 22px rgba(0, 0, 0, .18),
            0 0 0 14px rgba(37, 211, 102, 0);
    }
}

.wcb-attention:hover {
    transform: translateY(-2px) scale(1.012);
    box-shadow:
        0 22px 52px rgba(7, 94, 84, .1),
        0 10px 24px rgba(0, 0, 0, .2);
    animation-play-state: paused;
    filter: brightness(1.04);
}

.wcb-attention:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .6);
    outline-offset: 3px;
}

/* Sobald der Chat offen ist, Attention stumm versteckt */
#wcb-container.wcb-open .wcb-attention {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.92);
    animation: none;
}

.wcb-attention-text {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
}

@keyframes wcbWave {
    0%, 60%, 100% { transform: rotate(0); }
    10%           { transform: rotate(14deg); }
    20%           { transform: rotate(-8deg); }
    30%           { transform: rotate(14deg); }
    40%           { transform: rotate(-4deg); }
    50%           { transform: rotate(10deg); }
}

/* Weißer Kreis-Close-Button, leicht außerhalb der oberen rechten Ecke */
.wcb-attention-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1c2126;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    transition: background .15s ease, transform .15s ease, color .15s ease;
}

.wcb-attention-close svg {
    width: 14px;
    height: 14px;
}

.wcb-attention-close:hover {
    background: #f3f3f3;
    color: #000;
    transform: scale(1.08);
}

.wcb-attention-close:focus-visible {
    outline: 2px solid var(--wcb-primary, #25D366);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wcb-attention {
        transition: opacity .01s linear, transform .01s linear;
        animation: none !important;
    }
    .wcb-attention.wcb-visible { animation: none; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    #wcb-container { bottom: 16px; }
    #wcb-container.wcb-bottom-right { right: 16px; }
    #wcb-container.wcb-bottom-left  { left: 16px; }

    .wcb-chatbox {
        width: calc(100vw - 24px);
        /* `dvh` rechnet mit der dynamischen Viewport-Höhe (iOS Safari URL-Bar
           ein/aus) statt der statischen `vh`, die zu früh überläuft. Fallback
           auf vh für ältere Browser. */
        height: calc(100vh - 180px);
        height: calc(100dvh - 180px);
        max-height: calc(100vh - 180px);
        max-height: calc(100dvh - 180px);
    }

    .wcb-attention {
        max-width: calc(100vw - 48px);
        font-size: 13.5px;
    }
}