/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Acunic Brand — Getzner Textil
   Farben: 100% Schwarz / Hellgrau #D8D8D8 / Anthrazit #222222
   Font: Brandon Text (HVD Fonts)
   ========================================================================== */

@font-face {
  font-family: 'Brandon Text';
  src: url('fonts/BrandonText-Medium.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ACSS-Farbvariablen überschreiben — html:root schlägt :root unabhängig von Ladereihenfolge */
html:root {
  /* Primary = Anthrazit */
  --primary: #222222;
  --primary-hover: #000000;
  --primary-light: #d8d8d8;
  --primary-semi-light: #b5b5b5;
  --primary-semi-dark: #1a1a1a;
  --primary-dark: #111111;
  --primary-ultra-dark: #0a0a0a;
  --primary-ultra-light: #f2f2f2;

  /* Secondary = Hellgrau */
  --secondary: #d8d8d8;
  --secondary-hover: #c4c4c4;
  --secondary-light: #e8e8e8;
  --secondary-semi-light: #cccccc;
  --secondary-semi-dark: #6b6b6b;
  --secondary-dark: #3a3a3a;
  --secondary-ultra-dark: #161616;
  --secondary-ultra-light: #f5f5f5;

  /* Accent = 100% Schwarz */
  --accent: #000000;
  --accent-hover: #222222;
  --accent-light: #d8d8d8;
  --accent-semi-light: #b5b5b5;
  --accent-semi-dark: #111111;
  --accent-dark: #000000;
  --accent-ultra-dark: #000000;
  --accent-ultra-light: #f2f2f2;
}

/* Brandon Text global */
body,
button, input, select, textarea {
  font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.brxe-heading {
  font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.01em;
}

/* Smooth Scroll (reduced-motion-Override weiter unten) */
html {
  scroll-behavior: smooth;
}

/* Mobile-Overflow-Schutz: Container nie breiter als Viewport */
.brxe-container {
  max-width: 100%;
}

@media (max-width: 600px) {
  .frm-fluent-form,
  div.fluentform {
    padding: var(--space-m) var(--space-s);
  }
}

/* FF-Step-Slider darf die Seite nie horizontal aufziehen */
div.fluentform,
.frm-fluent-form {
  max-width: 100%;
  overflow-x: hidden;
}
.frm-fluent-form .ff-step-container {
  overflow: hidden;
  max-width: 100%;
}

/* ==========================================================================
   Fluent Forms — kräftiger Kontrast + Barrierefreiheit (WCAG AA)
   ========================================================================== */

/* Labels & Fragen: sattes Schwarz statt Grau */
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .ff-el-input--label {
  color: #111111 !important;
}
.frm-fluent-form .ff-el-input--label label {
  font-weight: 600;
}

/* Eingabefelder: deutliche Rahmen (≥3:1 für UI-Komponenten) */
.frm-fluent-form .ff-el-form-control {
  border: 1px solid #6b6b6b;
  color: #111111;
  background-color: #ffffff;
}
.frm-fluent-form .ff-el-form-control::placeholder {
  color: #595959;
  opacity: 1;
}

/* Checkboxen/Radios größer + Akzentfarbe schwarz */
.frm-fluent-form .ff-el-form-check-input {
  accent-color: #000000;
  width: 1.15em;
  height: 1.15em;
}

/* Weiter/Zurück/Submit: Schwarz auf Weiß statt Hellgrau */
.frm-fluent-form .ff-btn-next,
.frm-fluent-form .ff-btn-prev,
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff_btn_style {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.frm-fluent-form .ff-btn-next:hover,
.frm-fluent-form .ff-btn-prev:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff_btn_style:hover {
  background-color: #222222 !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}

/* Fortschrittsbalken: kräftig sichtbar */
.frm-fluent-form .ff-el-progress {
  background-color: #c4c4c4;
  border: 1px solid #6b6b6b;
}
.frm-fluent-form .ff-el-progress-bar {
  background-color: #000000 !important;
}
.frm-fluent-form .ff-el-progress-status {
  color: #111111;
}

/* Pflichtfeld-Stern: dunkles Rot (kontraststark auf Weiß) */
.frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
  color: #b00020 !important;
}

/* Fehlermeldungen lesbar */
.frm-fluent-form .error,
.frm-fluent-form .ff-el-is-error .text-danger {
  color: #b00020 !important;
}

/* ==========================================================================
   Buttons — einheitliches System (Bricks + Fluent Forms)
   Dunkle Flächen: weißer Button | Helle Flächen: schwarzer Button
   ========================================================================== */

.brxe-button.bricks-button,
.frm-fluent-form .ff-btn {
  border-radius: 0;
  font-weight: 600;
  font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.brxe-button.bricks-button:hover,
.frm-fluent-form .ff-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Schwarzer Button (helle Flächen + Formular) */
.brxe-button.btn--black {
  background-color: #000000;
  color: #ffffff;
}
.brxe-button.btn--black:hover {
  background-color: #222222;
  color: #ffffff;
}

/* Weißer Button (dunkle Flächen) */
.brxe-button.btn--white {
  background-color: #ffffff;
  color: #000000;
}
.brxe-button.btn--white:hover {
  background-color: #d8d8d8;
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  .brxe-button.bricks-button:hover,
  .frm-fluent-form .ff-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Barrierefreiheit global: sichtbarer Fokus überall
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.brxe-button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #000000 !important;
  outline-offset: 2px;
}
/* Auf dunklen Flächen: heller Fokusring */
.brxe-section a:focus-visible,
.brxe-section [tabindex]:focus-visible {
  outline-color: currentColor !important;
}

/* Im Formular: dezenter Fokus statt kräftigem Ring */
.frm-fluent-form input:focus-visible,
.frm-fluent-form select:focus-visible,
.frm-fluent-form textarea:focus-visible {
  outline: 1px solid #6b6b6b !important;
  outline-offset: 1px;
}

/* Animationen respektieren reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}