/* ===========================================================
   Centro Beach – Formulare (gemeinsames Design)
   Kontakt / Firmenbuchung / Bewerbung
   =========================================================== */

:root {
  --cb-gold:      #d4af37;
  --cb-gold-hell: #e7c558;
  --cb-schwarz:   #0c0c0e;
  --cb-karte:     #16161a;
  --cb-feld:      #1f1f24;
  --cb-linie:     #2c2c33;
  --cb-text:      #f4f2ec;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cb-schwarz);
  color: var(--cb-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 16px;
}

.cb-wrap {
  width: 100%;
  max-width: 560px;
}

/* ---------- Header ---------- */
.cb-header {
  text-align: center;
  margin-bottom: 24px;
}
.cb-header .cb-brand {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--cb-gold), var(--cb-gold-hell));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cb-gold);
}
.cb-header .cb-sub {
  margin-top: 6px;
  font-size: 14px;
  color: #b9b6ac;
}

/* ---------- Karte ---------- */
.cb-card {
  position: relative;
  background: var(--cb-karte);
  border: 1px solid var(--cb-linie);
  border-radius: 16px;
  padding: 28px 24px;
}
.cb-card h1 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 700;
}
.cb-card .cb-intro {
  margin: 0 0 22px;
  font-size: 14px;
  color: #b9b6ac;
}

/* ---------- Felder ---------- */
.cb-field { margin-bottom: 16px; }

.cb-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cb-text);
}
.cb-field label .req { color: var(--cb-gold); }

.cb-field input[type="text"],
.cb-field input[type="email"],
.cb-field input[type="tel"],
.cb-field select,
.cb-field textarea {
  width: 100%;
  background: var(--cb-feld);
  border: 1px solid var(--cb-linie);
  border-radius: 10px;
  color: var(--cb-text);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-field textarea { resize: vertical; min-height: 110px; }

.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus {
  border-color: var(--cb-gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.15);
}
.cb-field input::placeholder,
.cb-field textarea::placeholder { color: #6f6d66; }

.cb-field select {
  appearance: none;
  -webkit-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='%23d4af37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ---------- Zwei Felder nebeneinander (Name) ---------- */
.cb-row {
  display: flex;
  gap: 12px;
}
.cb-row .cb-field { flex: 1; }

/* ---------- Telefon (Vorwahl fix + Nummer flex) ---------- */
.cb-phone {
  display: flex;
  gap: 8px;
}
.cb-phone input.cb-vorwahl {
  width: 92px;
  flex: 0 0 92px;
}
.cb-phone input.cb-nummer {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Datei-Upload ---------- */
.cb-file {
  display: block;            /* MUSS block sein, sonst bricht die Upload-Box */
  width: 100%;
  background: var(--cb-feld);
  border: 1px dashed var(--cb-linie);
  border-radius: 10px;
  color: #b9b6ac;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  cursor: pointer;
}
.cb-file::file-selector-button {
  background: linear-gradient(135deg, var(--cb-gold), var(--cb-gold-hell));
  color: var(--cb-schwarz);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
}
.cb-file-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #6f6d66;
}

/* ---------- Datenschutz ---------- */
.cb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 22px;
  font-size: 13px;
  color: #b9b6ac;
}
.cb-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--cb-gold);
  flex: 0 0 auto;
  cursor: pointer;
}
.cb-consent a { color: var(--cb-gold); }

/* ---------- Turnstile ---------- */
.cb-turnstile { margin-bottom: 18px; }

/* ---------- Button ---------- */
.cb-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--cb-gold), var(--cb-gold-hell));
  color: var(--cb-schwarz);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .3px;
  border: none;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.cb-btn:hover { filter: brightness(1.05); }
.cb-btn:active { transform: translateY(1px); }
.cb-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Fehler-Markierung ---------- */
.cb-field.cb-invalid input,
.cb-field.cb-invalid select,
.cb-field.cb-invalid textarea {
  border-color: #e2574c;
  box-shadow: 0 0 0 3px rgba(226,87,76,.15);
}

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

/* ---------- Status-Overlay ---------- */
.cb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,8,10,.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.cb-overlay.show { display: flex; }
.cb-overlay-box {
  background: var(--cb-karte);
  border: 1px solid var(--cb-linie);
  border-radius: 16px;
  padding: 30px 26px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.cb-overlay-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}
.cb-overlay.ok    .cb-overlay-icon { background: rgba(212,175,55,.18); color: var(--cb-gold); }
.cb-overlay.error .cb-overlay-icon { background: rgba(226,87,76,.18);  color: #e2574c; }
.cb-overlay.load  .cb-overlay-icon { background: rgba(212,175,55,.12); color: var(--cb-gold); }
.cb-overlay-box h2 { margin: 0 0 8px; font-size: 18px; }
.cb-overlay-box p  { margin: 0 0 18px; font-size: 14px; color: #b9b6ac; }
.cb-overlay-box button {
  background: transparent;
  border: 1px solid var(--cb-linie);
  color: var(--cb-text);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- Spinner ---------- */
.cb-spin {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(212,175,55,.25);
  border-top-color: var(--cb-gold);
  border-radius: 50%;
  animation: cb-rotate .8s linear infinite;
}
@keyframes cb-rotate { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.cb-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: #6f6d66;
  line-height: 1.6;
}

/* ---------- Mobil ---------- */
@media (max-width: 460px) {
  body { padding: 18px 12px; }
  .cb-card { padding: 22px 16px; }
  .cb-row { flex-direction: column; gap: 0; }
  .cb-phone { flex-direction: column; }
  .cb-phone input.cb-vorwahl { width: 100%; flex: 1 1 auto; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .cb-btn, .cb-spin { transition: none; animation: none; }
}