/* Kontaktformular – Frontend, Design im WSK-Look (schwarz / orange / weiß).
   Gescoped auf .kf-wrap, damit nichts mit dem Theme kollidiert. */

/* Raleway selbst gehostet – wird nur geladen, wenn das Formular sie nutzt. */
@font-face{
  font-family:'KF Raleway';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('raleway.woff2') format('woff2');
}

.kf-wrap{
  --kf-bg:#0a0a0a;
  --kf-card:#161616;
  --kf-card-2:#1f1f1f;
  --kf-orange:#e87830;
  --kf-orange-soft:#f5a05c;
  --kf-text:#ffffff;
  --kf-muted:#b9b9b9;
  --kf-green:#34c759;
  --kf-red:#ff453a;
  --kf-line:#2a2a2a;
  --kf-radius:14px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:var(--kf-bg);
  color:var(--kf-text);
  padding:22px 18px;
  border-radius:var(--kf-radius);
  max-width:620px;
  margin:0 auto;
}
.kf-wrap *{box-sizing:border-box;}

.kf-card{
  background:var(--kf-card);
  border:1px solid var(--kf-line);
  border-radius:var(--kf-radius);
  padding:24px 22px 22px;
}

.kf-title{
  font-family:"KF Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;letter-spacing:-.01em;
  font-size:1.5rem;margin:0 0 4px;color:var(--kf-text);line-height:1.2;
}
.kf-sub{font-size:.95rem;color:var(--kf-muted);margin:0 0 18px;}

/* ---- Formular ---- */
.kf-form{display:flex;flex-direction:column;gap:14px;}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kf-field{display:flex;flex-direction:column;gap:6px;}
.kf-field--full{grid-column:1 / -1;}
.kf-field > span{font-weight:600;font-size:.9rem;color:var(--kf-text);}

.kf-field input,
.kf-field select,
.kf-field textarea{
  background:var(--kf-card-2);border:1.5px solid var(--kf-line);
  color:var(--kf-text);border-radius:10px;padding:11px 13px;
  font-size:1rem;font-family:inherit;width:100%;
}
.kf-field textarea{resize:vertical;min-height:120px;line-height:1.5;}
.kf-field input:focus,
.kf-field select:focus,
.kf-field textarea:focus{outline:none;border-color:var(--kf-orange);}
.kf-field input::placeholder,
.kf-field textarea::placeholder{color:#777;}

/* Dropdown-Pfeil hell, eigener Indikator */
.kf-field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b9b9b9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  padding-right:38px;cursor:pointer;
}
.kf-field select option{background:#1f1f1f;color:#fff;}

/* Captcha-Feld etwas kompakter */
.kf-field--captcha input{max-width:180px;}
.kf-captcha-q{font-weight:600;font-size:.9rem;color:var(--kf-text);}

.kf-check{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.9rem;color:var(--kf-muted);cursor:pointer;
}
.kf-check input{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;
  accent-color:var(--kf-orange);cursor:pointer;
}
.kf-check a{color:var(--kf-orange);text-decoration:underline;}

/* Honeypot verstecken */
.kf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.kf-form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;}
.kf-required-hint{margin:0;color:var(--kf-muted);font-size:.8rem;}

/* ---- Button ---- */
.kf-btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--kf-orange);color:#1a1200;
  font-weight:700;font-size:1rem;
  padding:12px 22px;border-radius:11px;
  transition:transform .05s ease, filter .15s ease;
  font-family:inherit;line-height:1.2;
}
.kf-btn:hover{filter:brightness(1.08);}
.kf-btn:active{transform:translateY(1px);}
.kf-btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;}

.kf-submit{width:100%;}
.kf-submit.is-loading{position:relative;color:transparent;}
.kf-submit.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:18px;height:18px;border:2.5px solid rgba(26,18,0,.35);
  border-top-color:#1a1200;border-radius:50%;animation:kf-spin .7s linear infinite;
}
@keyframes kf-spin{to{transform:rotate(360deg);}}

/* ---- Meldungen ---- */
.kf-message{font-size:.95rem;border-radius:10px;padding:0;}
.kf-message.is-error{
  background:rgba(255,69,58,.14);border:1px solid var(--kf-red);
  color:#ffb3ad;padding:12px 14px;
}

/* Erfolgsbox, die das Formular ersetzt */
.kf-done{text-align:center;padding:14px 8px 6px;}
.kf-done .kf-done-ico{
  width:56px;height:56px;border-radius:50%;
  background:var(--kf-green);color:#06270f;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;margin:0 auto 14px;
}
.kf-done h4{margin:0 0 8px;font-size:1.2rem;color:var(--kf-text);}
.kf-done p{margin:0;color:var(--kf-muted);}

/* ---- Lesbarkeit immer sicherstellen (Shapely-Parallax mit hellem Hintergrund) ---- */
.kf-wrap{background:#0a0a0a !important;}
.kf-wrap .kf-card{background:#161616 !important;}
.kf-wrap .kf-title{color:#ffffff !important;}

/* Datenschutz-Link im Häkchen-Text sicher als Link erkennbar (Theme-Override). */
.kf-wrap .kf-check a{color:var(--kf-orange) !important;text-decoration:underline !important;}

/* Eingabetext immer hell: Themes (z. B. Shapely) erzwingen sonst dunkle Schrift
   auf unserem dunklen Feld-Hintergrund – beim Tippen sonst schwarz auf schwarz. */
.kf-wrap .kf-field input,
.kf-wrap .kf-field select,
.kf-wrap .kf-field textarea{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff;
  caret-color:var(--kf-orange);
  background-color:#1f1f1f !important;
}
.kf-wrap .kf-field input::placeholder,
.kf-wrap .kf-field textarea::placeholder{
  color:#777 !important;-webkit-text-fill-color:#777;
}

/* Browser-Autofill (Chrome/Safari) füllt sonst hellen Hintergrund + dunkle Schrift ein. */
.kf-wrap .kf-field input:-webkit-autofill,
.kf-wrap .kf-field input:-webkit-autofill:hover,
.kf-wrap .kf-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#ffffff;
  -webkit-box-shadow:0 0 0 1000px #1f1f1f inset !important;
  box-shadow:0 0 0 1000px #1f1f1f inset !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* ---- Mobil ---- */
@media (max-width:560px){
  .kf-grid{grid-template-columns:1fr;}
  .kf-field--captcha input{max-width:none;}
}