/* === Felderer Systems × Flowbite look for Crisp Contact Form ============== */

:root {
  --fs-font:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  /* Light */
  --fs-bg: #ffffff;
  --fs-bg-muted: #f9fafb;
  --fs-text: #111827;
  --fs-text-muted: #6b7280;
  --fs-border: #e5e7eb;
  --fs-ring: #93c5fd;
  --fs-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.08);

  /* Accent (Flowbite blue) */
  --fs-primary: #3b82f6;
  --fs-primary-600: #2563eb;
  --fs-danger: #ef4444;

  --fs-radius-lg: 1rem; /* rounded-2xl */
  --fs-radius: 0.75rem; /* rounded-xl */
  --fs-field-pad-y: 0.625rem;
  --fs-field-pad-x: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fs-bg: #111827; /* gray-900 */
    --fs-bg-muted: #1f2937; /* gray-800 */
    --fs-text: #e5e7eb; /* gray-200 */
    --fs-text-muted: #9ca3af; /* gray-400 */
    --fs-border: #2b3440; /* etwas dunkler für mehr Kontrast */
    --fs-ring: #60a5fa;
    --fs-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  }
}

/* Base */
html,
body {
  background: var(--fs-bg);
  color: var(--fs-text);
  font-family: var(--fs-font);
}

/* Wrapper card */
.form-wrapper {
  max-width: 42rem;
  margin-inline: auto;
  background: var(--fs-bg);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow);
  padding: 1.5rem;
}

/* Entfernt innere doppelte Panels */
.form-wrapper .panel,
.form-wrapper .section,
.form-wrapper .crisp-card,
.form-wrapper .card,
.form-wrapper .container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Form fields */
.form-field {
  position: relative;
  margin-bottom: 1rem;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background: var(--fs-bg);
  color: var(--fs-text);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-field-pad-y) var(--fs-field-pad-x);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  outline: none;
}

/* angenehme Mindesthöhe für Textarea */
textarea {
  min-height: 9rem;
}

input::placeholder,
textarea::placeholder {
  opacity: 0;
}
input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.8;
  color: var(--fs-text-muted);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-ring) 40%, transparent);
}

/* Labels: fix oben, kein Overlap */
.form-field > label {
  position: absolute;
  left: 0.75rem;
  top: -0.35rem; /* feintuning */
  font-size: 0.875rem; /* text-sm */
  transform: scale(0.9);
  background: var(--fs-bg);
  padding: 0 0.25rem;
  color: var(--fs-text-muted);
  pointer-events: none;
}

/* Legend / hints */
.form-field legend {
  color: var(--fs-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.375rem;
}

/* Error */
input.error,
textarea.error,
select.error,
[aria-invalid="true"] {
  border-color: var(--fs-danger) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-danger) 25%, transparent) !important;
}

/* Buttons (vereinheitlicht für beide Klassen) */
.send-message,
.button.button--blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--fs-primary);
  color: #fff;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  box-shadow: var(--fs-shadow);
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.04s ease,
    box-shadow 0.15s ease;
  text-align: center;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.send-message:hover,
.button.button--blue:hover {
  background: var(--fs-primary-600);
}
.send-message:active,
.button.button--blue:active {
  transform: translateY(1px);
}
.send-message[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Privacy */
.privacy {
  margin-top: 1.25rem; /* war vorher am <a>, gehört an den Block */
  font-size: 0.875rem;
  color: var(--fs-text-muted);
  text-align: center;
}
.privacy a {
  color: var(--fs-primary);
  text-decoration: underline;
}

/* hCaptcha */
.h-captcha iframe {
  border-radius: 0.5rem;
}

/* Crisp branding ausblenden (falls vorhanden) */
.crisp-branding {
  display: none !important;
}

/* Remove inner card so only your outer Flowbite card is visible */
.form-wrapper {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important; /* wir geben den Abstand dem Formular selbst */
}

/* Gib dem Inhalt wieder Luft */
.form {
  padding: 1.5rem !important;
}

/* Falls Crisp zusätzliche Panels rendert: alles flach halten */
.form-wrapper .panel,
.form-wrapper .section,
.form-wrapper .crisp-card,
.form-wrapper .card,
.form-wrapper .container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- FINAL overflow fix: kill horizontal scroll in the Crisp iframe ------- */

/* 1) Niemals breiter als der Viewport + Boxen korrekt rechnen */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* 2) Horizontalen Overflow komplett unterbinden */
html,
body,
.form-wrapper,
.form {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 3) Falls Crisp irgendwo Breiten >100% setzt, neutralisieren */
.form,
.form-wrapper,
.panel,
.section,
.container {
  width: 100% !important;
}

/* 4) Kein „Scroll-Leisten-Pixel“ durch Outline/Border-Mix */
.form,
.form-wrapper {
  border: 0 !important;
  outline: 0 !important;
}

/* 5) Letzte mögliche Übeltäter: pseudo-lines rechts */
.form-field::before,
.form-field::after,
.form-field > label::before,
.form-field > label::after {
  content: none !important;
  display: none !important;
}

/* A11y: klarer Tastatur-Fokus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

/* Fehlermeldungen/Hilfetexte etwas kontrastreicher */
.form-field .error-text,
.form-field .help,
.form-field .hint {
  color: var(--fs-text-muted);
}

/* Mobile Feinschliff */
@media (max-width: 420px) {
  .form {
    padding: 1.25rem !important;
  }
  input,
  textarea,
  select {
    padding: 0.55rem 0.7rem;
  }
  .send-message {
    padding: 0.55rem 0.9rem;
  }
}