:root {
  --ketm-bg: #ffffff;
  --ketm-text: #1c1f23;
  --ketm-muted: #5f6b76;
  --ketm-border: #e6edf3;
  --ketm-accent: #005E86;   /* primary blue */
  --ketm-accent-2: #0073aa; /* secondary blue */
  --ketm-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  --ketm-radius: 14px;
  --ketm-radius-button: 5px;
  --ketm-gap: 14px;
  --ketm-label-w: 240px;    /* desktop label width */
  --ketm-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Grundlayout */
.main-heading {
  margin-bottom: var(--ketm-gap);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: var(--ketm-text);
}

.ketmarket-form {
  max-width: 600px;
  margin: var(--ketm-gap) auto;
  font-family: var(--ketm-font);
  background: var(--ketm-bg);
  color: var(--ketm-text);
  border: 1px solid var(--ketm-border);
  border-radius: var(--ketm-radius);
  box-shadow: var(--ketm-shadow);
  /* 20px ≈ var(--ketm-gap) + 6px */
  padding: calc(var(--ketm-gap) + 6px);
}

/*Infobox für gespeicherte suchen*/
/* Prefill Info Box (Basis – du hast das schon ähnlich) */
/* Prefill box */
.ketm-ff-prefill-wrap{
  position: relative;                 /* für das X */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 16px;

  margin: 0 0 16px 0;
  padding: 14px 18px;
  padding-right: 56px;                /* Platz für das X */
  background: #f9fcff;
  border: 1px solid #cde4f0;
  border-radius: 8px;
}
.ketm-ff-prefill-wrap > *{ width:auto !important; }

.ketm-ff-prefill-copy{ font-size:14px; color:var(--ketm-text,#1c1f23); }
.ketm-ff-prefill-copy strong{ color:var(--ketm-accent,#005E86); }
.ketm-ff-prefill-copy span{ margin-left:6px; opacity:.9; }
.ketm-ff-prefill-cta .form-button{ display:inline-flex; text-decoration:none; margin-top: 0% !important; font-size: 14px !important;}

/* X-Button oben rechts */
.ketm-ff-dismiss{
  position:absolute;
  top: 5px; right: 5px;                 /* oben rechts */
  z-index:2;
  width:32px; height:32px;
  line-height:30px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:#607080;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
}
.ketm-ff-dismiss:hover{ background:rgba(0,0,0,.06); }

/* Toggle rechts ausrichten */
.ketm-ff-prefill-toggle{
  display: block;              /* Block, damit auto-Margin greift */
  width: fit-content;          /* auf Inhalt schrumpfen (Safari-OK) */
  margin: -8px 0 16px auto;    /* auto links => schiebt nach rechts */
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px dashed #cde4f0;
  background: #fff;
  color: #005E86;
  cursor: pointer;
}
@supports not (width: fit-content) {
  .ketm-ff-prefill-toggle { width: max-content; }
}
.ketm-ff-prefill-toggle:hover{ background:#f3f9ff; }

/* Prefilled state (grün) */
.ketm-ff-prefilled{ background:#f3fff6; border-color:#b6e2c3; }
.ketm-ff-prefilled .ketm-ff-prefill-copy strong{ color:#1b7f3a; }
.form-button-clear{ background:#eee; border:1px solid #ccc; color:#333; }
.form-button-clear:hover{ background:#ddd; }

/* Hidden */
.is-hidden{ display:none !important; }

@media (max-width:560px){
  .ketm-ff-prefill-wrap{ grid-template-columns:1fr; }
}
/*Ende - Infobox für gespeicherte suchen*/

.form-heading {
  margin-bottom: var(--ketm-gap);
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  color: var(--ketm-text);
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ketm-accent-2);
  margin-top: 10px;
  max-width: 100%;
}

/* Style only the helper line under labels */
.form-description {
  display: block;
  margin-top: 6px;
  margin-bottom: 10px;
  color: var(--ketm-muted);
  font-size: 12px;         /* ~14px */
  line-height: 1.4;
  font-weight: 400;
}

.form-description-required {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--ketm-muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
}

abbr{
  text-decoration:none; border:none !important; color: var(--ketm-accent); font-weight:600;
}

.annual-turnover {
    margin-bottom: 20px; /* Abstand zu den Buttons */
    width: 20ch; /* Passt für 8-stellige Zahlen */
    text-align: right; /* Optional: Zahlen rechtsbündig */
}

.fundingfinder-navigation-button-wrapper {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}

/* Felder */
.form-input,
.form-select,
textarea.form-input,
#contact-name,
#phone {
  width: 100%;
  padding: calc(var(--ketm-gap) - 4px);
  margin-bottom: var(--ketm-gap);
  border: 1px solid var(--ketm-border);
  border-radius: calc(var(--ketm-radius) - 8px);
  background: var(--ketm-bg);
  color: var(--ketm-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.form-input {
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ketm-muted) 50%),
                    linear-gradient(135deg, var(--ketm-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-input::placeholder,
textarea.form-input::placeholder {
  color: var(--ketm-muted);
}

.form-input:focus,
.form-select:focus,
textarea.form-input:focus,
#contact-name:focus,
#phone:focus {
  border-color: var(--ketm-accent);
  /* dezentes Focus-Glow ohne neue Variable */
  box-shadow: 0 0 0 3px rgba(0, 94, 134, 0.15);
}

/* Buttons */
.elementor-shortcode .ketmarket-form .form-button {
  display: inline-block;
  padding: 5px 15px;
  margin-top: var(--ketm-gap);
  background: var(--ketm-accent-2);
  border: 1px solid var(--ketm-accent-2);
  border-radius: var(--ketm-radius-button);
  color: #fff; /* bewusster, hoher Kontrast auf Accent */
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.02s ease-in;
}

.form-button:hover {
  background: var(--ketm-accent);
  border-color: var(--ketm-accent);
}

.form-button:active {
  transform: translateY(1px);
}

/* Nur im AI-Button das Emoji weiß färben */
.elementor-shortcode .ketmarket-form #generate-ai-description .emoji,
.elementor-shortcode .ketmarket-form .form-button#generate-ai-description .emoji,
.elementor-shortcode .ketmarket-form .form-button#generate-ai-product .emoji,
.elementor-shortcode .ketmarket-form button#generate-ai-description .emoji {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.1em;
  filter: brightness(0) saturate(100%) invert(1);
}

/*Description AI generation*/

/*
#product-description,
#product-url,
#company-website::placeholder {
    font-size: 12px;   
    color: #888;        
}
*/

.description-ai-generate-wrapper {
    display: flex;
    justify-content: space-between; /* Button links, URL rechts */
    align-items: flex-start;
    gap: 20px; /* optionaler Abstand */
}

/* Linke Spalte (Label + Input untereinander) */
.description-ai-url-wrapper {
    display: flex;
    flex-direction: column; /* Label über Input */
    align-items: flex-start;
    flex: 1; /* darf breiter werden */
    
}

.description-ai-url-wrapper .form-description {
  color: var(--ketm-text);;
}

/* Rechte Spalte (Button + Status) */
.description-ai-generate-button-wrapper {
    display: flex;
    flex-direction: column; /* Button über p */
    align-items: flex-start;
    width: 175px;
}

/*button*/
#generate-ai-product {
  margin-top: 6px;
}

.description-ai-generate-button-wrapper #ai-product-status {
  font-size: 12px; line-height: 1.2; color: var(--ketm-muted);
}

/*Zahnräder spin*/
/* Ruhigere Drehung */
@keyframes ketm-spin { to { transform: rotate(360deg); } }

.form-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;                 /* fixiert die Höhe */
}

.form-button .gear {
  display: inline-flex;           /* stabilisiert die Box */
  align-items: center;
  justify-content: center;
  width: 1em;                 /* feste Box, verhindert “Wippen” */
  height: 1em;
  line-height: 0;                 /* kein Reflow beim Drehen */
  transform-origin: 50% 50%;      /* exakt aus der Mitte drehen */
  will-change: transform;         /* flüssiger */
}

.form-button.is-loading .gear {
  animation: ketm-spin 2.50s linear infinite;  /* langsamer */
}

.form-button .gear { position: relative; top: 0.5px; } /* bei Bedarf 0–1px tweaken */

/* Nur AI-Buttons vertikal anordnen */
#generate-ai-description,
#generate-ai-product {
  flex-direction: column;   /* Icon über Text */
  justify-content: center;  /* mittig ausrichten */
  align-items: center;      /* horizontal mittig */
  gap: 6px;                 /* Abstand zwischen Icon und Text */
}

#generate-ai-description .gear,
#generate-ai-product .gear {
  margin: 0;  /* evtl. vorhandenes margin entfernen */
}

/* Optional: Motion-Respect */
@media (prefers-reduced-motion: reduce) {
  .form-button.is-loading .gear { animation: none; }
}