/*
 Theme Name:   communicaziun.ch - 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
*/

/* ==========================================================================
   Card Component
   ========================================================================== */

[data-cid="fohtaj"] {
  background: #fff;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

[data-cid="fohtaj"] > .brxe-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

[data-cid="fohtaj"] .brxe-image {
  border-radius: var(--radius-m);
  overflow: hidden;
  margin: 10px 10px 0 10px;
}

[data-cid="fohtaj"] .brxe-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
}

[data-cid="fohtaj"] .brxe-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-s);
}

[data-cid="fohtaj"] .brxe-text {
  padding: 0 var(--space-s);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
}

[data-cid="fohtaj"] .brxe-button {
  margin: auto var(--space-s) var(--space-s);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  color: #000;
  border: none;
  padding: 0;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

#brxe-ctabox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: clamp(16px, 2vw, 28px) clamp(24px, 3vw, 48px);
  background: linear-gradient(90deg, var(--blau) 0%, var(--türkis) 100%);
  border-radius: var(--radius-m);
}

#brxe-ctatext {
  color: #fff;
  font-weight: 700;
}

#brxe-ctalink {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

#brxe-ctafaq {
  color: #fff;
  font-size: var(--text-xs);
}

#brxe-ctaicon svg,
#brxe-ctaicon img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Fluent Forms – Textarea Line-Height Fix
   ==========================================================================
   Das Formular steckt teilweise in Bricks-Sections, die als <h1> gerendert
   werden. Die h1 erbt line-height: 115% (= 38.64px bei 33.6px font-size),
   was als Pixelwert an Kinder vererbt wird. Zusätzlich erzwingt eine globale
   Regel `textarea { line-height: inherit !important }` die Vererbung — daher
   reicht ein Override direkt auf der textarea nicht. Die Korrektur muss am
   .fluentform-Wrapper ansetzen, damit die textarea den korrekten Wert erbt. */
.fluentform,
.fluentform form,
.fluentform fieldset,
.fluentform .ff-el-group,
.fluentform .ff-el-input--content {
  line-height: 1.4 !important;
  font-size: 16px !important;
}
.fluentform textarea,
.fluentform textarea.ff-el-form-control {
  line-height: 1.4 !important;
  font-size: 16px !important;
}

/* ==========================================================================
   Fluent Forms auf dunklem Hintergrund (.bg-dunkel)
   ========================================================================== */

/* Labels & Beschriftungen */
.bg-dunkel .fluentform .ff-el-input--label label,
.bg-dunkel .fluentform .ff-el-form-check-label,
.bg-dunkel .fluentform label,
.bg-dunkel .fluentform legend {
  color: var(--weiss);
}

/* Inputs, Textareas, Selects */
.bg-dunkel .fluentform .ff-el-form-control,
.bg-dunkel .fluentform textarea.ff-el-form-control,
.bg-dunkel .fluentform select.ff-el-form-control {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--weiss);
  border-color: rgba(255, 255, 255, 0.35);
}

.bg-dunkel .fluentform .ff-el-form-control:focus {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--weiss);
  color: var(--weiss);
  outline: none;
}

/* Unterstrich-Variante (ff-el-input--content mit border-bottom) */
.bg-dunkel .fluentform .ff-el-input--content {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

/* Placeholder */
.bg-dunkel .fluentform .ff-el-form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.bg-dunkel .fluentform .ff-el-form-control::-webkit-input-placeholder { color: rgba(255,255,255,0.7); }
.bg-dunkel .fluentform .ff-el-form-control::-moz-placeholder { color: rgba(255,255,255,0.7); opacity: 1; }

/* Checkboxen / Radios */
.bg-dunkel .fluentform input[type="checkbox"],
.bg-dunkel .fluentform input[type="radio"] {
  accent-color: var(--weiss);
}

/* Help-Texte / Beschreibungen */
.bg-dunkel .fluentform .ff-el-help-message,
.bg-dunkel .fluentform .ff-el-input--label small {
  color: rgba(255, 255, 255, 0.75);
}

/* Fehlermeldungen lesbar halten */
.bg-dunkel .fluentform .error,
.bg-dunkel .fluentform .text-danger,
.bg-dunkel .fluentform .ff-el-is-error .text-danger {
  color: #ffb4b4;
}

/* Chrome/Safari Autofill */
.bg-dunkel .fluentform .ff-el-form-control:-webkit-autofill,
.bg-dunkel .fluentform .ff-el-form-control:-webkit-autofill:hover,
.bg-dunkel .fluentform .ff-el-form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--weiss);
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
  caret-color: var(--weiss);
  transition: background-color 9999s ease-in-out 0s;
}

/* Datepicker-Icon invertieren */
.bg-dunkel .fluentform .ff-el-form-control.ff-el-datepicker {
  color-scheme: dark;
}