/* =========================================================================
   cdgsn-enhancements.css
   Zusatzschicht zum bestehenden Theme: Reiter-Umschalter im Kontaktformular
   + schwebende WhatsApp-/Rückruf-Buttons. Nutzt bewusst dieselben
   Design-Tokens (Farben, Schrift) wie das React-Bundle, damit optisch kein
   Bruch entsteht:
     Navy:  #0A2540 / #0d3260     Teal-Akzent: #2BBFA4 / #1ea88f
     Grau:  #6B7A8D                Schrift: 'Manrope', sans-serif
   ========================================================================= */

/* ---------- Reiter-Umschalter im Angebots-/Besichtigungsformular ---------- */

.cdgsn-tabbar {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    padding: 6px;
    margin: 0 auto 32px;
    width: fit-content;
    max-width: 100%;
}

/* Lange und kurze Beschriftung: ab Tablet-Breite abwärts wird die kurze
   Variante gezeigt, damit drei Reiter nebeneinander passen, ohne dass der
   Text aus der Schaltfläche läuft. Der vollständige Text bleibt über
   aria-label für Screenreader erhalten. */
.cdgsn-tab-short { display: none; }

.cdgsn-tab {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    border-radius: 100px;
    padding: 12px 22px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.cdgsn-tab:hover {
    color: #ffffff;
}

.cdgsn-tab[aria-selected="true"] {
    background: linear-gradient(135deg, #2BBFA4 0%, #1ea88f 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(43, 191, 164, 0.4);
}

.cdgsn-tab:focus-visible {
    outline: 2px solid #2BBFA4;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .cdgsn-tabbar {
        width: 100%;
        gap: 4px;
        padding: 5px;
        border-radius: 16px;  /* Rechteck statt Pille – wirkt mit mehrzeiligen Labels ruhiger */
    }
    .cdgsn-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 11px 6px;
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;   /* darf umbrechen statt überzulaufen */
        hyphens: auto;
        border-radius: 12px;
    }
    .cdgsn-tab-full { display: none; }
    .cdgsn-tab-short { display: inline; }
}

@media (max-width: 360px) {
    .cdgsn-tab { font-size: 12px; padding: 10px 4px; }
}

/* ---------- "Angebot anfragen" Panel (spiegelt Struktur/Optik des
   bestehenden Besichtigungsformulars, um visuell identisch zu wirken) ---------- */

.cdgsn-panel-head { text-align: center; margin-bottom: 40px; }

.cdgsn-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(43, 191, 164, 0.15);
    border: 1px solid rgba(43, 191, 164, 0.3);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 20px;
}

.cdgsn-panel-eyebrow span {
    width: 6px; height: 6px; border-radius: 50%; background: #2BBFA4;
}

.cdgsn-panel-eyebrow b {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #2BBFA4;
    letter-spacing: 0.08em;
}

.cdgsn-panel-head h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 4vw, 44px);
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 12px;
}

.cdgsn-panel-head p {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.cdgsn-quote-form {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 40px 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cdgsn-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.cdgsn-quote-form label {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 8px;
}

.cdgsn-quote-form input,
.cdgsn-quote-form select,
.cdgsn-quote-form textarea {
    width: 100%;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.cdgsn-quote-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232BBFA4' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
}

/* Das aufgeklappte Auswahlmenü übernimmt in vielen Browsern den (hier fast
   transparenten) Hintergrund des Selects – die Einträge wären dann dunkel auf
   dunkel und unlesbar. Deshalb bekommen option/optgroup EXPLIZIT eine eigene
   Hintergrund- und Textfarbe. */
.cdgsn-quote-form select option,
.cdgsn-quote-form select optgroup {
    background-color: #ffffff;
    color: #0A2540;
}

.cdgsn-quote-form select optgroup {
    font-weight: 700;
    font-style: normal;
}

.cdgsn-quote-form select option:disabled { color: #6B7A8D; }

/* Zahlenfeld (m²): Spinner-Pfeile in Firefox/Chrome dezent halten */
.cdgsn-quote-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.cdgsn-quote-form input[type="number"]::-webkit-outer-spin-button,
.cdgsn-quote-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Auswahl "Einmalige Reinigung? Ja / Nein" (Segmented Control) --- */
.cdgsn-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.cdgsn-segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 13px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cdgsn-segmented label span {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
}

.cdgsn-segmented input[type="radio"] { accent-color: #2BBFA4; width: 16px; height: 16px; cursor: pointer; }

.cdgsn-segmented label:hover { background: rgba(255, 255, 255, 0.12); }

.cdgsn-segmented label:has(input:checked) {
    background: rgba(43, 191, 164, 0.18);
    border-color: rgba(43, 191, 164, 0.6);
}

@media (max-width: 400px) {
    .cdgsn-segmented { grid-template-columns: 1fr; }
}

.cdgsn-quote-form input::placeholder,
.cdgsn-quote-form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }

.cdgsn-quote-form input:focus,
.cdgsn-quote-form select:focus,
.cdgsn-quote-form textarea:focus {
    border-color: rgba(43, 191, 164, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.cdgsn-quote-form button[type="submit"] {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #2BBFA4 0%, #1ea88f 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(43, 191, 164, 0.4);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cdgsn-quote-form button[type="submit"]:hover { transform: translateY(-2px); }
.cdgsn-quote-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.cdgsn-consent-row { display: flex; align-items: flex-start; gap: 12px; }

.cdgsn-consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #2BBFA4;
    cursor: pointer;
}

.cdgsn-consent-row label {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    cursor: pointer;
    margin: 0;
}

.cdgsn-consent-row label a { color: #2BBFA4; text-decoration: underline; }

.cdgsn-form-status {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    border-radius: 12px;
    padding: 12px 16px;
    display: none;
}
.cdgsn-form-status.is-visible { display: block; margin-top: 20px; }
.cdgsn-form-status.is-error { background: rgba(220, 90, 90, 0.15); border: 1px solid rgba(220, 90, 90, 0.4); color: #ffb4b4; }
.cdgsn-form-status.is-success {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 64px;
    text-align: center;
}
.cdgsn-form-status.is-success .cdgsn-success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(43, 191, 164, 0.2);
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
}
.cdgsn-form-status.is-success h3 {
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 28px; color: #fff; margin: 0 0 12px;
}
.cdgsn-form-status.is-success p {
    font-family: 'Manrope', sans-serif; font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.7; margin: 0;
}
.cdgsn-form-status.is-success strong { color: #2BBFA4; }

@media (max-width: 640px) {
    .cdgsn-quote-form { padding: 28px 24px; }
    .cdgsn-form-row-2 { grid-template-columns: 1fr; }
}

/* ---------- Schwebende Kontakt-Buttons (WhatsApp + Rückruf) ---------- */

/* Positionierung bewusst UNTEN LINKS:
   Der Chat-Assistent des Themes liegt fix unten rechts (.chat-launcher:
   bottom 24 / right 24, 60x60 px; geöffnetes .chat-window bis 390x600 px,
   z-index 60). Unten links kollidieren die Buttons weder mit dem
   Chat-Button noch mit dem geöffneten Chat-Fenster.
   z-index bewusst 55 (< 60): Wird der Chat geöffnet, legt er sich sauber
   über die Buttons, statt dass diese darüber schweben. */
#cdgsn-fab-container {
    position: fixed;
    left: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Manrope', sans-serif;
}

.cdgsn-fab {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px 0 14px;
    border-radius: 100px;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cdgsn-fab:hover { transform: translateY(-2px) scale(1.03); }

.cdgsn-fab svg { flex-shrink: 0; }

.cdgsn-fab-label {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.cdgsn-fab-whatsapp { background: #25D366; }
.cdgsn-fab-call { background: linear-gradient(135deg, #2BBFA4 0%, #1ea88f 100%); }

/* Ab 900px Breite blendet das Theme unten eine fixierte CTA-Leiste über die
   volle Breite ein (.mobile-cta: bottom 16, ca. 56 px hoch). Die Buttons
   rücken dann darüber, damit sich nichts überlagert. */
@media (max-width: 900px) {
    #cdgsn-fab-container { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* Auf kleinen Bildschirmen: platzsparende reine Icon-Bubble */
@media (max-width: 480px) {
    #cdgsn-fab-container { left: 14px; gap: 10px; }
    .cdgsn-fab { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
    .cdgsn-fab-label { display: none; }
}

/* ---------- HubSpot-Terminbuchung (nur aktiv, wenn ein Link hinterlegt ist) ----------
   Das Buchungsfenster von HubSpot ist ein fremdes iframe und lässt sich von
   außen nicht umstylen. Damit es trotzdem zum Rest passt, sitzt es in einer
   weißen Karte mit denselben Rundungen und Schatten wie die übrigen Karten
   der Seite – und bekommt dieselbe Kopfzeile wie die anderen beiden Reiter. */

.cdgsn-hubspot-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(10, 37, 64, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 640px;
}

#cdgsn-hubspot-meeting { width: 100%; }

#cdgsn-hubspot-meeting iframe {
    display: block;
    width: 100% !important;
    border: 0;
}

.cdgsn-hubspot-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #6B7A8D;
    background: #ffffff;
}

.cdgsn-hubspot-loading.is-hidden { display: none; }

.cdgsn-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(43, 191, 164, 0.25);
    border-top-color: #2BBFA4;
    animation: cdgsn-spin 0.9s linear infinite;
}

@keyframes cdgsn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cdgsn-spinner { animation: none; border-top-color: rgba(43, 191, 164, 0.6); }
}

@media (max-width: 560px) {
    .cdgsn-hubspot-card { border-radius: 18px; min-height: 700px; }
}