/* =========================================================
   Sticky CTA (mobile first)
   ========================================================= */

/* Container: Position + Layout */
.cw-sticky-cta{
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  gap: 10px;
  z-index: 50;
}

/* Fallback-Zustand: sichtbar (falls Animation/Media Query nicht greift) */
.cw-sticky-cta .cw-cta{
  opacity: 1;
  transform: none;
}

/* Animation: nur wenn keine reduzierte Bewegung gewünscht */
@media (prefers-reduced-motion: no-preference){
  .cw-sticky-cta .cw-cta{
    opacity: 0;
    transform: translateX(120px);
    animation: cwBtnSlideIn 520ms ease-out both;
    will-change: transform, opacity;
  }

  .cw-sticky-cta .cw-cta:nth-child(1){ animation-delay: 120ms; }
  .cw-sticky-cta .cw-cta:nth-child(2){ animation-delay: 220ms; }
  .cw-sticky-cta .cw-cta:nth-child(3){ animation-delay: 320ms; }

  @keyframes cwBtnSlideIn{
    to { transform: translateX(0); opacity: 1; }
  }
}

/* Button/Link Basis */
.cw-cta{
  width: 50px;
  height: 50px;
  border-radius: 10px;

  background-color: var(--wp--preset--color--base);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px 50px; /* Icongröße */

  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Interactions */
.cw-cta:hover,
.cw-cta:active,
.cw-cta:focus-visible{
  background-color: var(--wp--preset--color--white);
}

.cw-cta:focus-visible{
  outline: 3px solid var(--wp--preset--color--white);
  outline-offset: 3px;
}

/* Icons: Default */
.cw-cta-call{ background-image: url("../assets/images/icon-call.png"); }
.cw-cta-mail{ background-image: url("../assets/images/icon-mail.png"); }
.cw-cta-shop{ background-image: url("../assets/images/icon-shop.png"); }

/* Icons: Hover/Active/Focus */
.cw-cta-call:hover, .cw-cta-call:active, .cw-cta-call:focus-visible{ background-image: url("../assets/images/icon-call-blue.png"); }
.cw-cta-mail:hover, .cw-cta-mail:active, .cw-cta-mail:focus-visible{ background-image: url("../assets/images/icon-mail-blue.png"); }
.cw-cta-shop:hover, .cw-cta-shop:active, .cw-cta-shop:focus-visible{ background-image: url("../assets/images/icon-shop-blue.png"); }

/* Success-Text: Zeilenumbrüche anzeigen */
.cw-dialog-content .wpcf7-response-output{ white-space: pre-line;}

.wpcf7-response-output:empty { display: none; }

a.cw-privacy-trigger{text-decoration:underline;}

/* =========================================================
   Dialog (mobile first: fullscreen + fade)
   ========================================================= */

/* <dialog> Reset */
.cw-dialog{
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Backdrop Fade */
.cw-dialog::backdrop{
  background: rgba(0, 16, 34, .55);
  transition: opacity 350ms ease;
  opacity: 0;
}
.cw-dialog.cw-is-open::backdrop{ opacity: 1; }
.cw-dialog.cw-is-closing::backdrop{ opacity: 0; }

/* Panel (Mobile fullscreen) */
.cw-dialog-content{
  position: fixed;
  inset: 0; /* 100% Breite/Höhe */

  background: var(--wp--preset--color--primary);
  padding: 22px;    
  overflow: auto;

  color: var(--wp--preset--color--white) !important;
  font-size: var(--wp--preset--font-size--p-1);

  opacity: 0;
  transition: opacity 350ms ease;
  will-change: opacity;
}

/* Panel Fade (über Klassen vom JS) */
.cw-dialog.cw-is-open .cw-dialog-content{ opacity: 1; }
.cw-dialog.cw-is-closing .cw-dialog-content{ opacity: 0; }

/* Typo: Links & Text im Dialog */
.cw-dialog-content a,
.cw-dialog-content p{
  color: inherit;
  font-size: inherit;
}

p.cw-dialog-btn-wrapper{
    margin-top:18px;
}

/* =========================================================
   Form Controls im Dialog (CF7 + allgemein)
   ========================================================= */

/* Inputs/Select/Textarea: gleiche Typo, Box-Model, Standardbreite */
.cw-dialog-content input,
.cw-dialog-content select,
.cw-dialog-content textarea{
  font-family: inherit;
  font-size: inherit;
  color: var(--wp--preset--color--primary);
  box-sizing: border-box;
  width: 100%;
}

/* Checkbox/Submit sollen NICHT full width sein */
.cw-dialog-content input[type="checkbox"],
.cw-dialog-content input[type="submit"]{
  width: auto;
}

.wpcf7-list-item {
	margin: 0;
}

/* Checkbox Anpassung */
.wpcf7 input[type="checkbox"]{
  transform: scale(1.25);
  transform-origin: left top;
}

.cw-dialog-content .wpcf7-acceptance input[type="checkbox"], 
.wpcf7 input[type="checkbox"]
{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--wp--preset--color--white);  
  background: transparent;
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  margin: 0;
  flex: 0 0 auto;           
}

.cw-dialog-content .wpcf7-acceptance input[type="checkbox"]:checked::before, 
.wpcf7 input[type="checkbox"]:checked::before{
  content: "";
  width: 8px;
  height: 8px;
  background: var(--wp--preset--color--white);   
  border-radius: 2px;
}

/* Radio Anpassung */
.cw-dialog-content .wpcf7 input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid var(--wp--preset--color--white);
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
}

.cw-dialog-content .wpcf7 input[type="radio"]::before{
  content:"";
  position:absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: transparent;
}

.cw-dialog-content .wpcf7 input[type="radio"] + .wpcf7-list-item-label{
  margin-top:-5px;
}

.cw-dialog-content .wpcf7 input[type="radio"]:checked::before{
  background:var(--wp--preset--color--white);
}

/* Submit: Native-Button-Optik reduzieren */
.cw-dialog-content input.cw-dialog-primary-btn[type="submit"]{
  appearance: none;
  -webkit-appearance: none;
}

/* Inputs/Select: Zeilenhöhe + nochmal font-size */
.cw-dialog-content input,
.cw-dialog-content select{
  line-height: 1.2em;
  font-size: var(--wp--preset--font-size--p-1);
}

/* Labels: block + linksbündig */
.cw-dialog-content label{
  display: block;
  width: 100%;
  text-align: left;
}

/* CF7: Validierung + Messages */
.wpcf7-not-valid-tip{
margin-top:1em;
  color: var(--wp--preset--color--base);
}

.wpcf7-response-output{
  margin: 0 !important;
  border: 0 !important;
  font-size: inherit;
  background-color: transparent;
  color: inherit;
  padding: 0 !important;
}

.wpcf7-spinner{
  display: none;
}

input.wpcf7-submit{
  color: inherit;
}

input.wpcf7-submit:hover{
  color: var(--wp--preset--color--primary) !important;
  background-color: var(--wp--preset--color--white) !important;
}

/* Default: eigene Success-Box verstecken */
.sticky-cta-mail-form .cw-success { display:none; }

/* Nach Erfolg: Form ausblenden, Success zeigen */
.sticky-cta-mail-form .cw-success { display: none; }
.sticky-cta-mail-form.is-sent .cw-success { display:block; }
.sticky-cta-mail-form.is-sent form.wpcf7-form { display:none; }



/* =========================================================
   Dialog: Close Button (Mobile)
   ========================================================= */

.cw-dialog-close{
  border: 0;
  background-color: var(--wp--preset--color--base);
  color: inherit;

  line-height: 1;
  cursor: pointer;

  position: fixed;
  right: 22px;
  bottom: 22px;

  width: 50px;
  height: 50px;
  border-radius: 10px;

  font-size: var(--wp--preset--font-size--h-3);
  z-index: 999;
}

.cw-dialog-close:hover,
.cw-dialog-close:active,
.cw-dialog-close:focus-visible{
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--base);
}

/* Primary Button (Hover/Active/Focus) – nur <a>  */
a.cw-dialog-primary-btn:hover,
a.cw-dialog-primary-btn:active,
a.cw-dialog-primary-btn:focus-visible{
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--primary) !important;
}

/* Dialog Headline */
.cw-dialog-content h3{
  margin: 0 0 10px 0;
  font-size: var(--wp--preset--font-size--h-3);
  color: inherit;
  display: block !important;
}

/* =========================================================
   Dialog: Acceptance Checkbox nicht im Text
   ========================================================= */

.wpcf7-acceptance label, 
.wpcf7-list-item label{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.wpcf7-acceptance .wpcf7-list-item-label {
  margin-top:-7px;
}

.wpcf7-list-item .wpcf7-list-item-label {
  margin-right:1em;
}

/* =========================================================
   Dialog: Callback Checkbox + Image + Telefon in einer Zeile
   ========================================================= */
.cw-dialog-content .sticky-cta-callback{
  text-decoration:underline;
}

.cw-dialog-content .cta-row br{ display:none; }

.cw-dialog-content .cta-row > p{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;        
  gap:10px;
  margin:0;
}

/* Checkbox-Block (links) */
.cw-dialog-content .cta-row .wpcf7-form-control-wrap[data-name="callback"]{
  flex: 1 1 calc(100% - 117px - 10px);
  max-width: calc(100% - 117px - 10px);
  min-width: 0;
}

.cw-dialog-content .cta-row .wpcf7-checkbox label{
  display:grid;
  grid-template-columns:22px 1fr;
  flex: 0 0 100%;        
  gap:10px;           
  align-items:start;
  margin:0;
}

.cw-dialog-content .cta-row .wpcf7-list-item-label{
  display:block;
  min-width:0;
}

/* Bild (mittig) */
.cw-dialog-content .cta-row .cta-image{
  flex:0 0 auto;
  width:117px;
  height:117px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* Telefon (rechts) */
.cw-dialog-content .cta-row label{
  flex:1 1 auto;
  min-width:0;
  width:auto;         
  margin:0;
} 

img#cw-b-sticky-cta-image-preview {
    max-width:120px;
    height:auto;
    margin-bottom:8px;
}

/* =========================================================
   Privacy Dialog Content Overrides
   ========================================================= */

#privacy-dialog .cw-dialog-body,
#privacy-dialog .cw-dialog-body *{
  background: transparent !important;
  padding: 0 !important;
  font-size: inherit !important;
}


/* =========================================================
   Desktop Overrides (ab 768px)
   ========================================================= */

@media (min-width: 768px){
  /* Callback Checkbox verkleinern, damit es stimmiger aussieht*/
    .cw-dialog-content .cta-row .wpcf7-form-control-wrap[data-name="callback"]{
        flex:0 0 auto;
        max-width:130px;
    }
    
  /* wieder alles in einer Zeile */
  .cw-dialog-content .cta-row > p{ flex-wrap: nowrap; }

  /* Telefon wieder rechts, nimmt Restbreite */
  .cw-dialog-content .cta-row label{ flex: 1 1 auto; }

  /* Sticky CTA: größere Abstände */
  .cw-sticky-cta{
    right: 24px;
    bottom: 24px;
    gap: 14px;
  }

  /* CTA Buttons: größer */
  .cw-cta{
    width: 78px;
    height: 78px;
    border-radius: 18px;
    background-size: 78px 78px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }

  /* Primary Button Padding (Desktop) */
  .cw-dialog-primary-btn{
    padding-left: 80px;
    padding-right: 80px;
  }

  /* Dialog Panel: Card rechts unten */
  .cw-dialog-content{
    inset: auto;
    right: 24px;
    bottom: 120px;

    width: min(600px, calc(100vw - 48px));
    max-height: calc(100vh - 200px - 120px);

    overflow: auto;
    border-radius: 22px;

    padding: 44px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
  }

  /* Close Button: oben rechts im Panel */
  .cw-dialog-close{
    position: absolute;
    top: 12px;
    right: 12px;

    width: 36px;
    height: 36px;

    background: rgba(255,255,255,.08);
  }

  .cw-dialog-close:hover,
  .cw-dialog-close:active,
  .cw-dialog-close:focus-visible{
    color: var(--wp--preset--color--white);
    background-color: var(--wp--preset--color--base);
  }
}