/* ============================================
   ACREDIA DESIGN SYSTEM - CSS Template v2
   Optimiert für Material Design Komponenten
   ============================================ */

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
  /* === ACREDIA PRIMARY COLORS === */
  --ss-primary-color: #541278;
  /* Acredia Lila - Hauptfarbe */
  --ss-acredia-primary-color: #541278;
  /* Acredia Lila - Hauptfarbe */
  --ss-acredia-highlight-color: #a83de2;
  /* Helles Lila - Akzentfarbe */
  --ss-acredia-secondary-color: #edd8f8;
  /* Light Purple - Hover States */
  --ss-focus-color: #a83de2;
  /* Focus/Akzentfarbe */

  /* === BACKGROUND COLORS === */
  --ss-bg-color: #ffffff;
  /* Weiß */
  --ss-button-bg-color: #f5f5f5;
  /* Hellgrauer Button Hintergrund */
  --ss-input-bg-color: #ffffff;
  /* Weißer Input Hintergrund */

  /* === TEXT COLORS === */
  --ss-font-color: #4d4d4d;
  /* Dunkelgrau - Haupttext */
  --ss-font-placeholder-color: #8d8d8d;
  /* Mittelgrau - Placeholder */
  --ss-text-white: #ffffff;
  /* Weiß - für dunkle Hintergründe */
  --ss-text-black: #000000;
  /* Schwarz */

  /* === BORDER & DISABLED COLORS === */
  --ss-border-color: #dcdee2;
  /* Hellgrau - Borders */
  --ss-disabled-color: #dcdee2;
  /* Hellgrau - Disabled States */

  /* === STATUS COLORS === */
  --ss-success-color: #00b755;
  /* Grün - Success */
  --ss-error-color: #dc3545;
  /* Rot - Error/Warning */
  --ss-highlight-color: #fffb8c;
  /* Gelb - Highlight/Selection */

  /* === SHADOWS === */
  --ss-shadow-default: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  --ss-shadow-hover: 0 4px 12px rgba(84, 18, 120, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  --ss-shadow-focus: 0 0 0 3px rgba(168, 61, 226, 0.2);
  --ss-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);

  /* === SPACING === */
  --ss-spacing-xl: 46px;
  /* Extra Large */
  --ss-spacing-l: 30px;
  /* Large */
  --ss-spacing-m: 25px;
  /* Medium */
  --ss-spacing-s: 7px;
  /* Small */
  --ss-spacing-xs: 5px;
  /* Extra Small */
  --ss-spacing-xxs: 3px;
  /* Extra Extra Small */

  /* === DIMENSIONS === */
  --ss-main-height: 30px;
  --ss-content-height: 300px;

  /* === BORDER RADIUS === */
  --ss-border-radius: 8px;
  /* Standard */
  --ss-border-radius-small: 8px;
  /* Inputs */
  --ss-border-radius-medium: 12px;
  /* Buttons */
  --ss-border-radius-large: 20px;
  /* Cards */
  --ss-border-radius-round: 100%;
  /* Circle */

  /* === ANIMATIONS === */
  --ss-animation-timing: 0.2s;
  --ss-transition-default: all 0.2s ease-in-out;

  /* === TYPOGRAPHY === */
  --ss-font-family: 'Roboto', sans-serif;
  --ss-font-size-small: 15px;
  --ss-font-size-medium: 1rem;
  --ss-font-size-large: 1.5rem;
  --ss-line-height-small: 1.3rem;
  --ss-line-height-medium: 1.4rem;

  /* === LOGO === */
  --logo: url("https://acredia-test.saas.pas-cloud.com:443/pas/app/cdn/read/other/acredia_logo.svg");
}


/* ============================================
   MATERIAL DESIGN THEME OVERRIDES - CRITICAL
   Diese Regeln überschreiben die Material Design Standardfarben
   ============================================ */

/* Primary Color Override - alle mat-primary Elemente */
.mat-primary .mat-button-focus-overlay,
.mat-button.mat-primary .mat-button-focus-overlay,
.mat-flat-button.mat-primary,
.mat-raised-button.mat-primary,
.mat-fab.mat-primary,
.mat-mini-fab.mat-primary {
  background-color: var(--ss-acredia-primary-color) !important;
}

.mat-flat-button.mat-primary {
  background-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: var(--ss-shadow-default);
}

.mat-flat-button.mat-primary:hover {
  background-color: var(--ss-acredia-highlight-color) !important;
  box-shadow: var(--ss-shadow-hover) !important;
  transform: translateY(-1px);
}

/* Accent Color Override - alle mat-accent Elemente */
.mat-accent .mat-button-focus-overlay,
.mat-button.mat-accent .mat-button-focus-overlay,
.mat-flat-button.mat-accent,
.mat-raised-button.mat-accent,
.mat-fab.mat-accent,
.mat-mini-fab.mat-accent {
  background-color: var(--ss-button-bg-color) !important;
}

.mat-flat-button.mat-accent {
  background-color: var(--ss-button-bg-color) !important;
  color: var(--ss-text-black) !important;
  box-shadow: var(--ss-shadow-default) !important;
  transition: all 0.25s ease-in-out !important;
}

.mat-flat-button.mat-accent:hover {
  background-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
  box-shadow: var(--ss-shadow-hover) !important;
  transform: translateY(-1px);
}

/* Stroked Buttons */
.mat-stroked-button {
  border-color: var(--ss-border-color) !important;
  color: var(--ss-text-black) !important;
  transition: all 0.25s ease-in-out !important;
}

.mat-stroked-button:hover {
  background-color: var(--ss-acredia-secondary-color) !important;
  border-color: var(--ss-acredia-primary-color) !important;
  transform: translateY(-1px);
  box-shadow: var(--ss-shadow-hover);
}

/* Regular Buttons */
.mat-button {
  color: var(--ss-acredia-primary-color) !important;
  transition: all 0.2s ease-in-out !important;
}

.mat-button:hover {
  background-color: var(--ss-acredia-secondary-color) !important;
}

/* Ripple Effects */
.mat-button.mat-primary .mat-ripple-element,
.mat-flat-button.mat-primary .mat-ripple-element,
.mat-raised-button.mat-primary .mat-ripple-element {
  background-color: rgba(168, 61, 226, 0.1) !important;
}

/* Button Border Radius - Rounded Corners */
.mat-button,
.mat-flat-button,
.mat-raised-button,
.mat-stroked-button,
.mat-icon-button,
button.mat-button,
button.mat-flat-button,
button.mat-raised-button,
button.mat-stroked-button {
  border-radius: var(--ss-border-radius-medium) !important;
}

/* Ensure Material Design default border-radius is overridden */
.mat-button-base {
  border-radius: var(--ss-border-radius-medium) !important;
}


/* ============================================
   MODULES GRID MODE (Dashboard/Tiles)
   ============================================ */
#modules-grid-mode {
  justify-content: center !important;
  gap: var(--ss-spacing-xl) !important;
  margin-top: var(--ss-spacing-m) !important;
}

#modules-grid-mode>div:hover {
  box-shadow: var(--ss-shadow-hover);
}

#modules-grid-mode .module-title {
  color: var(--ss-acredia-primary-color);
  margin-bottom: 0.2rem;
}

#modules-grid-mode .tile-content mat-icon,
#modules-grid-mode .tile-quick-actions mat-icon,
#navigation .mat-icon {
  color: var(--ss-acredia-highlight-color);
}


/* ============================================
   RADIO BUTTON GROUPS
   ============================================ */
mat-radio-group.mat-radio-group {
  flex-flow: row !important;
  gap: 20px;
  justify-content: flex-start;
}

mat-radio-button {
  display: flex !important;
  /* max-width: 30%; */
  padding: 8px 20px !important;
  border: none;
  background-color: var(--ss-button-bg-color);
  border-radius: var(--ss-border-radius-small);
  transition: var(--ss-transition-default);
  max-height: fit-content;
  min-width: 2rem;
  box-shadow: var(--ss-shadow-default);
}

mat-radio-button:hover {
  background-color: var(--ss-acredia-primary-color);
  color: var(--ss-text-white);
  box-shadow: var(--ss-shadow-hover);
  transform: translateY(-1px);
}

mat-radio-button.mat-radio-checked {
  background-color: var(--ss-acredia-primary-color);
  color: var(--ss-text-white);
}

mat-radio-group .mat-radio-container {
  display: none;
}

/* Radio Button Group Variants */
.acr_radio-btn-grp {
  padding: 0 !important;
}

.acr_radio-btn-grp>.mat-form-field {
  padding: 0 !important;
}

.acr_radio-btn-grp.acr_text-box-grp .mat-radio-button {
  line-height: var(--ss-line-height-medium) !important;
  padding: 25px !important;
  transition: var(--ss-transition-default);
}

.acr_radio-btn-with-label {
  padding: 0 !important;
}

.acr_radio-btn-with-label label {
  justify-content: center !important;
}

.acr_radio-btn-with-label mat-radio-button label span {
  word-break: keep-all !important;
  padding: 0 !important;
}

.acr_radio-btn-with-label mat-label {
  /* font-size: var(--ss-font-size-small) !important;
  color: var(--ss-text-black) !important; */
  font-family: var(--ss-font-family) !important;
  white-space: break-spaces;
  line-height: var(--ss-line-height-small);
}

.acr_radio-btn-with-label .mat-form-field {
  padding: 0 !important;
}

.acr_radio-btn-with-label .mat-form-field-wrapper .mat-form-field-infix {
  display: flex;
  flex-direction: column-reverse;
  gap: 17px;
  position: initial;
  border: none;
  padding: 0;
}

.acr_radio-btn-with-label mat-radio-group,
.acr_radio-btn-with-label span {
  position: initial;
}

.acr_radio-btn-with-label label {
  position: initial;
  transform: initial !important;
  width: 100% !important;
}

.acr_radio-btn-right-group mat-radio-button {
  max-height: 22px !important;
  min-width: auto !important;
  max-width: none !important;
  padding: 10px 20px !important;
}

.acr_radio-btn-right-group mat-radio-button label {
  white-space: nowrap !important;
}

.acr_radio-btn-right-group mat-radio-button label span {
  word-break: keep-all !important;
  padding: 0 !important;
}


/* ============================================
   INPUT FIELDS
   ============================================ */
.acr_input div:has(> input) {
  border-radius: var(--ss-border-radius-small);
  padding-left: var(--ss-spacing-xs) !important;
}

.acr_input div:has(> .mat-form-field-infix) {
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius-small);
}

.acr_input .mat-form-field:not(.mat-focused):not(.mat-form-field-hide-placeholder) .mat-form-field-infix .mat-form-field-label-wrapper label mat-label {
  background-color: var(--ss-bg-color);
  padding: 0 var(--ss-spacing-xxs);
  color: var(--ss-acredia-primary-color) !important;
}

.acr_input .mat-form-field:not(.mat-focused):not(.mat-form-field-hide-placeholder) .mat-form-field-infix .mat-form-field-label-wrapper {
  left: var(--ss-spacing-xs);
  top: -7px;
}

.acr_input.acr_resultOutput div:has(> .mat-form-field-infix) {
  border: none;
}

.acr_input div:has(> textarea) {
  border-radius: var(--ss-border-radius-small);
  padding-left: var(--ss-spacing-xs) !important;
}

.acr_input input {
  caret-color: var(--ss-acredia-highlight-color) !important;
}

pas-input-text.acr_input.acr_resultOutput {
  color: var(--ss-text-white);
  border: none !important;
}

.acr_input .mat-form-field-subscript-wrapper mat-error {
  margin-top: 17px !important;
  margin-left: 6px !important;
}

.acr_input .mat-form-field-underline {
  position: absolute;
  bottom: 0;
  background-color: transparent !important;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -1px);
  border-radius: var(--ss-border-radius-round);
}

.acr_input .mat-form-field-wrapper {
  position: relative;
  padding-bottom: 0 !important;
}

.acr_input .mat-form-field-label-wrapper {
  left: var(--ss-spacing-xs);
}

.acr_input>.mat-focused .mat-form-field-label-wrapper {
  left: var(--ss-spacing-xs);
  top: -7px;
}

.acr_input>.mat-focused .mat-form-field-label-wrapper label mat-label {
  background-color: var(--ss-bg-color);
  padding: 0 var(--ss-spacing-xxs);
  color: var(--ss-acredia-primary-color) !important;
}

/* Input Focus States - Modern Box Shadow */
.acr_input .mat-form-field.mat-focused div:has(> .mat-form-field-infix),
.acr_input .mat-form-field.mat-focused div:has(> input),
.acr_input .mat-form-field.mat-focused div:has(> textarea) {
  border-color: var(--ss-acredia-primary-color) !important;
  box-shadow: var(--ss-shadow-focus) !important;
  transition: all 0.2s ease-in-out;
}

.acr_input .mat-form-field:not(.mat-focused) div:has(> .mat-form-field-infix),
.acr_input .mat-form-field:not(.mat-focused) div:has(> input),
.acr_input .mat-form-field:not(.mat-focused) div:has(> textarea) {
  transition: all 0.2s ease-in-out;
}

.acr_input .mat-form-field-underline .mat-form-field-ripple,
#navigation .mat-form-field-underline .mat-form-field-ripple,
.mat-form-field-appearance-legacy .mat-form-field-ripple {
  background-color: var(--ss-acredia-highlight-color) !important;
}

.acr_input .mat-form-field-infix {
  border-top: 0 !important;
}

.acr_mb-input {
  margin-bottom: 1.4rem;
}


/* ============================================
   DROPDOWN / SELECT
   ============================================ */
.acr_dropdown span.mat-select-value-text {
  padding-left: 1rem;
}

.blue .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: var(--ss-acredia-highlight-color) !important;
}


/* ============================================
   BUTTONS - CUSTOM CLASSES
   ============================================ */

/* Primary Buttons (Next, Submit) */
.acr_footer-btn-next button {
  border-radius: var(--ss-border-radius-medium) !important;
  background-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
  transition: var(--ss-transition-default) !important;
  box-shadow: var(--ss-shadow-default) !important;
  font-family: var(--ss-font-family);
}

.acr_footer-btn-next button:hover {
  background-color: var(--ss-acredia-highlight-color) !important;
  color: var(--ss-text-white) !important;
}

/* Secondary Buttons (Back, Cancel) */
.formResult button,
.acr_footer-btn-back button,
.acr_btn button {
  border-radius: var(--ss-border-radius-medium) !important;
  background-color: var(--ss-button-bg-color) !important;
  color: var(--ss-text-black) !important;
  transition: var(--ss-transition-default) !important;
  box-shadow: var(--ss-shadow-default) !important;
  font-family: var(--ss-font-family);
}

.formResult button:hover {
  background-color: var(--ss-acredia-secondary-color) !important;
}

.acr_footer-btn-back button:hover,
.acr_btn button:hover {
  background-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
}

/* Icon Buttons */
.ac_backIconButton,
.ac_customOfferIconButton {
  flex-grow: 0 !important;
}

.ac_backIconButton button,
.ac_customOfferIconButton button {
  border-radius: var(--ss-border-radius-medium) !important;
  background-color: var(--ss-button-bg-color) !important;
  transition: var(--ss-transition-default) !important;
  box-shadow: var(--ss-shadow-default) !important;
  padding: 8px 12px !important;
  min-width: 40px !important;
}

.ac_backIconButton button:hover,
.ac_customOfferIconButton button:hover {
  background-color: var(--ss-acredia-primary-color) !important;
}

.ac_backIconButton button mat-icon,
.ac_customOfferIconButton button mat-icon {
  color: var(--ss-text-black);
}

.ac_backIconButton button:hover mat-icon,
.ac_customOfferIconButton button:hover mat-icon {
  color: var(--ss-text-white) !important;
}

.ac_backIconButton mat-label,
.ac_customOfferIconButton mat-label {
  display: none !important;
}

/* Disabled Buttons */
.endScreen_container pas-group-grid-wrap ng-component button:disabled {
  border-radius: var(--ss-border-radius-medium) !important;
  background-color: var(--ss-button-bg-color) !important;
  color: rgba(0, 0, 0, 0.26) !important;
}

/* Endscreen Buttons */
.endScreen_container pas-group-grid-wrap pas-input-button button {
  border-radius: var(--ss-border-radius-medium) !important;
  background-color: var(--ss-button-bg-color) !important;
  color: var(--ss-text-black) !important;
  transition: var(--ss-transition-default) !important;
  box-shadow: var(--ss-shadow-default) !important;
}

.endScreen_container pas-group-grid-wrap pas-input-button button:hover {
  background-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
}


/* ============================================
   HEADER STYLING
   ============================================ */
header .mat-button-wrapper,
header .mat-icon {
  color: var(--ss-acredia-highlight-color) !important;
}

/* Logo ersetzen */
.blue header {
  display: none !important;
  background-image: var(--logo),
    linear-gradient(to right,
      transparent 0,
      transparent 48px,
      var(--ss-bg-color) 48px,
      var(--ss-bg-color) 248px,
      transparent 248px),
    linear-gradient(to bottom,
      var(--ss-acredia-primary-color) 0,
      var(--ss-acredia-primary-color) 8px,
      var(--ss-bg-color) 8px) !important;
  background-position: 78px center, left, center;
  background-size: auto 35px, 100%, 100%;
}


/* ============================================
   FOOTER STYLING
   ============================================ */
.acr_footer {
  flex-basis: auto !important;
  justify-content: space-between !important;
  margin-bottom: 0px;
}

.acr_footer::before {
  content: "" !important;
  height: 1px;
  width: 100%;
  background-color: var(--ss-acredia-highlight-color) !important;
  opacity: 0.5 !important;
  margin: var(--ss-spacing-l) 0 !important;
  z-index: 999 !important;
}

.acr_footer-btn-back,
.acr_footer-btn-next {
  flex-grow: initial !important;
  padding: 0 !important;
}


/* ============================================
   INFO BOX / ALERTS
   ============================================ */
.acr_info-box::before {
  content: "\f059" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: var(--ss-acredia-highlight-color) !important;
  margin-right: 8px !important;
}

.acr_info-box {
  margin-bottom: var(--ss-spacing-l);
}

.acr_info-box div div {
  color: var(--ss-acredia-highlight-color) !important;
}

/* Warning Variant */
.acr_info-box.warning {
  justify-content: center !important;
  gap: 15px !important;
}

.acr_info-box.warning::before {
  color: var(--ss-error-color) !important;
  justify-content: center !important;
}

.acr_info-box.warning div div {
  color: var(--ss-error-color) !important;
}

.acr_info-box.warning div {
  color: var(--ss-error-color) !important;
  width: auto !important;
}


/* ============================================
   DIVIDERS
   ============================================ */
.acr_divider::after {
  content: "" !important;
  height: 1px !important;
  width: 100% !important;
  background-color: var(--ss-acredia-highlight-color) !important;
  opacity: 0.5 !important;
  margin: var(--ss-spacing-l) 0 !important;
  z-index: 999 !important;
}


/* ============================================
   TABLES
   ============================================ */
.acr_table mat-icon {
  color: var(--ss-acredia-highlight-color);
}

.acr_table table th div div:after {
  color: var(--ss-acredia-highlight-color) !important;
}

.acr_table .blue pas-data-table-bpaas mat-toolbar.data-table-footer,
.blue pas-data-table-lazy-obsolete mat-toolbar.data-table-footer,
.blue pas-data-table-lazy mat-toolbar.data-table-footer,
.blue pas-data-table mat-toolbar.data-table-footer {
  background: linear-gradient(to bottom,
      var(--ss-acredia-primary-color) 2px,
      var(--ss-bg-color) 2px);
}

.blue pas-data-table mat-toolbar.data-table-footer mat-label {
  color: var(--ss-acredia-highlight-color);
}

.hide-overview-footer .data-table-footer mat-label {
  display: none !important;
}


/* ============================================
   FORM RESULTS / CALCULATIONS
   ============================================ */
pas-group-grid.responsive-grid.formResult {
  background: var(--ss-acredia-primary-color);
  padding: 1rem 3rem;
  border-radius: var(--ss-border-radius-large);
}

pas-group-grid.responsive-grid.formResult pas-group-grid-wrap {
  margin-bottom: 0;
}

.formResult .acr_label-side>div>div {
  color: var(--ss-text-white) !important;
}

.formResult>.acr_input .mat-form-field-flex {
  border: none !important;
}

.acr_resultOutput mat-label {
  background-color: transparent !important;
}

pas-group-grid-wrap.responsive-column.recommendations {
  align-self: center;
}

pas-group-grid.premiumResult {
  justify-content: flex-start;
  gap: 1rem;
}

pas-group-grid.premiumResult>pas-group-grid-wrap {
  font-size: var(--ss-font-size-large);
  flex-basis: content !important;
}

pas-group-grid.responsive-grid.recommendations {
  display: grid !important;
  grid-template-columns: max-content 1fr 33%;
  grid-column-gap: 10px;
}


/* ============================================
   CONTACT FORM
   ============================================ */
.contactForm pas-group-grid-wrap:has(h3) {
  margin-bottom: 0px;
}

.contactForm pas-group-grid-wrap:has(> .acr_input) {
  margin-bottom: var(--ss-spacing-l) !important;
}

.contactForm pas-group-grid-wrap pas-group-grid {
  justify-content: space-between;
}

.contactForm pas-group-grid-wrap pas-group-grid>pas-group-grid-wrap {
  flex-basis: 49% !important;
}

pas-group-grid-wrap:has(.contactForm) {
  margin-bottom: 0;
}


/* ============================================
   OFFER CONFIGURATION
   ============================================ */
pas-group-grid.responsive-grid.offerParams {
  display: grid !important;
  grid-template-columns: max-content 300px 1fr;
  grid-column-gap: 5rem;
}

pas-group-grid-wrap.responsive-column.offerParams .acr_radio-btn-right-group .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}


/* ============================================
   WISHES AND NEEDS SECTION
   ============================================ */
pas-group-grid.wishesAndNeeds {
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  margin-bottom: 0;
  padding: 1rem 0 1rem 0;
}

pas-static-label.acr_checkIcon>div>div {
  display: grid;
  grid-template-columns: auto 1fr;
}

.acr_checkIcon div div::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  color: var(--ss-acredia-highlight-color) !important;
  font-weight: 900;
  padding: 0 1rem 0 1.5rem;
}


/* ============================================
   CHECKBOX STYLES
   ============================================ */
/* Checkbox - alle Varianten (primary, accent, checked) */
.mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-indeterminate .mat-checkbox-background,
.mat-checkbox-checked.mat-primary .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.blue .mat-checkbox-checked .mat-checkbox-background,
.blue .mat-checkbox-indeterminate .mat-checkbox-background,
.blue .mat-checkbox-checked.mat-primary .mat-checkbox-background,
.blue .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.blue .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: var(--ss-acredia-primary-color) !important;
}

/* Checkbox Frame */
.mat-checkbox-frame {
  border-color: var(--ss-border-color) !important;
}

.mat-checkbox:hover .mat-checkbox-frame {
  border-color: var(--ss-acredia-primary-color) !important;
}

/* Checkbox Ripple */
.mat-checkbox .mat-checkbox-ripple .mat-ripple-element {
  background-color: var(--ss-acredia-primary-color) !important;
}


/* ============================================
   DATEPICKER STYLES
   ============================================ */
/* Datepicker - Selected Date */
.mat-calendar-body-selected,
.mat-calendar-body-today.mat-calendar-body-selected {
  background-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
}

/* Datepicker - Today (not selected) */
.mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: var(--ss-acredia-primary-color) !important;
}

/* Datepicker - Hover States */
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  background-color: var(--ss-acredia-secondary-color) !important;
}

/* Datepicker - Active (keyboard focus) */
.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background-color: var(--ss-acredia-secondary-color) !important;
}

/* Datepicker Header Controls */
.mat-calendar-header {
  color: var(--ss-acredia-primary-color) !important;
}

.mat-calendar-period-button,
.mat-calendar-previous-button,
.mat-calendar-next-button {
  color: var(--ss-acredia-primary-color) !important;
}

.mat-calendar-period-button:hover,
.mat-calendar-previous-button:hover,
.mat-calendar-next-button:hover {
  background-color: var(--ss-acredia-secondary-color) !important;
}

/* Datepicker Arrow */
.mat-calendar-arrow {
  border-top-color: var(--ss-acredia-primary-color) !important;
}

/* Time Picker Styles */
.ngx-mat-timepicker .mat-icon-button:hover {
  background-color: var(--ss-acredia-secondary-color) !important;
}

.ngx-mat-timepicker .mat-icon-button .mat-icon {
  color: var(--ss-acredia-primary-color) !important;
}

.ngx-mat-timepicker .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: var(--ss-acredia-primary-color) !important;
}

/* Datepicker Done Button */
.mat-datepicker-content .actions button,
.mat-datepicker-content .actions button.mat-stroked-button,
.mat-datepicker-content .actions button.mat-button,
.mat-datepicker-content .actions button.mat-flat-button,
ngx-mat-datetime-content .actions button,
ngx-mat-datetime-content .actions button.mat-stroked-button {
  background-color: var(--ss-acredia-primary-color) !important;
  border-color: var(--ss-acredia-primary-color) !important;
  color: var(--ss-text-white) !important;
}

.mat-datepicker-content .actions button:hover,
.mat-datepicker-content .actions button.mat-stroked-button:hover,
ngx-mat-datetime-content .actions button:hover {
  background-color: var(--ss-acredia-highlight-color) !important;
  color: var(--ss-text-white) !important;
}

/* Datepicker Button Ripple */
.mat-datepicker-content .actions button .mat-ripple-element,
ngx-mat-datetime-content .actions button .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Datepicker Button Icon */
.mat-datepicker-content .actions button .mat-icon,
ngx-mat-datetime-content .actions button .mat-icon {
  color: var(--ss-text-white) !important;
}


/* ============================================
   MATERIAL DESIGN OVERRIDES
   ============================================ */
.mat-form-field {
  padding: 0 !important;
}

.blue .mat-progress-bar-fill::after {
  background-color: var(--ss-acredia-primary-color) !important;
}

.blue .mat-icon.mat-primary {
  color: var(--ss-acredia-highlight-color) !important;
}

.blue pas-data-table mat-toolbar.data-table-header .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: var(--ss-acredia-highlight-color) !important;
}

.blue .mat-form-field.mat-focused .mat-form-field-label {
  color: var(--ss-acredia-highlight-color) !important;
}

.blue .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: var(--ss-acredia-primary-color) !important;
}

.blue .mat-input-element {
  caret-color: var(--ss-acredia-highlight-color) !important;
}

#process-list h1 {
  color: var(--ss-acredia-highlight-color);
}

#process-list .mat-icon,
.blue .mat-menu-panel .mat-menu-item .mat-icon-no-color,
.blue .mat-menu-panel .mat-menu-item-submenu-trigger::after,
.blue .mat-menu-panel mat-icon,
.blue .mat-menu-item.active {
  color: var(--ss-acredia-highlight-color);
}

.task-processing h1 {
  color: var(--ss-acredia-highlight-color);
}

.task-processing button {
  background-color: var(--ss-acredia-highlight-color) !important;
  border-radius: 10px !important;
  color: var(--ss-text-white);
}


/* ============================================
   MARGIN & SPACING UTILITIES
   ============================================ */
.acr_no-margin-bottom h3,
.acr_no-margin-bottom h4 {
  margin-bottom: 0 !important;
}

pas-group-grid-wrap:has(> .acr_no-margin-bottom) {
  margin-bottom: 0px !important;
}

.acr_no-margin-bottom.responsive-column {
  margin-bottom: 0 !important;
}

pas-group-grid-wrap:has(> .acr_low-margin-bottom) {
  margin-bottom: var(--ss-spacing-m) !important;
}

pas-group-grid-wrap:has(> .acr_margin-bottom-10) {
  margin-bottom: 10px !important;
}

pas-group-grid-wrap:has(> .acr_medium-margin-bottom) {
  margin-bottom: 35px !important;
}


/* ============================================
   WRAPPER SPECIFIC STYLES
   ============================================ */
.responsive-column:has(> .acr_label-side) {
  display: flex;
  align-items: center;
}

pas-group-grid-wrap:has(> .acr_label-side) {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

pas-group-grid-wrap:has(> .acr_input) {
  margin-bottom: 0 !important;
}

pas-group-grid-wrap:has(> .acr_radio-btn-right-group) {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.responsive-column:has(> .ac_backIconButton),
.responsive-column:has(> .ac_customOfferIconButton) {
  justify-content: flex-end;
}

.acr_manualOffer-footer {
  /* Placeholder for specific footer styling */
}


/* ============================================
   UTILITY CLASSES
   ============================================ */
.hide-element {
  display: none !important;
}

.hide_item {
  display: initial !important;
}

.responsive-view {
  padding: 0 64px 0 !important;
}

.responsive-view::before {
  content: unset !important;
}


.button-grid.responsive-grid>.responsive-column button {
  color: #4a1d6f !important;
  align-self: stretch;
  font-weight: bold !important;
  white-space: normal !important;

  display: flex;
  align-items: flex-start;
  text-align: left;
  padding-top: 12px;
  justify-content: flex-start;
  line-height: 1.4rem;
  font-size: 1rem;

}

.button-grid.responsive-grid>.responsive-column button:hover {
  background-color: rgb(245, 245, 245) !important;
}

.button-grid.responsive-grid>.responsive-column:nth-child(1) button {
  background-color: #4a1d6f !important;
  color: white !important;
  font-size: 2.2rem;
  padding-top: 32px;
  line-height: 2.8rem;
}

.button-grid.responsive-grid>.responsive-column:nth-child(2) button {
  background-color: #f5a5a8 !important;
  color: white !important;
  font-size: 2.2rem;
  padding-top: 32px;
  line-height: 2.8rem;
}

.button-grid.responsive-grid>.responsive-column:nth-child(1) {
  grid-area: first;
}

.button-grid.responsive-grid>.responsive-column:nth-child(2) {
  grid-area: second;
}

.button-grid.responsive-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px;
  height: 400px;
  max-width: 980px;
  margin: auto;
  grid-template-areas:
    "first  second  third-top"
    "first  second  third-mid"
    "first  second  third-bot";
}

.pf-title>div {
  overflow: visible !important;
}

.pf-title>div>div {
  font-size: 52px !important;
  line-height: 1.3 !important;
  padding-top: 5px !important;
  color: rgba(56, 25, 86) !important;
}

.pf-ue1>div>div {
  font-size: 32px !important;
  line-height: 1.3 !important;
  padding-top: 5px !important;
  color: rgba(102, 102, 102) !important;
}

.pf-ue2>div>div {
  font-size: 24px !important;
  line-height: 1.3 !important;
  padding-top: 5px !important;
  color: rgba(102, 102, 102) !important;
}

.pf-ue3Fragen>mat-form-field>div>div>div>span>label>mat-label {
  font-size: 16px !important;
  line-height: 1.3 !important;
  padding-top: 5px !important;
  color: rgba(56, 25, 86) !important;
}

.pf-eingabefeld input,
.pf-eingabefeld textarea {
  font-family: 'Basic-Gothic', sans-serif !important;
  font-size: 16px !important;
  color: rgb(56, 25, 86) !important;
  text-align: left !important;
  background-color: rgb(255, 255, 255) !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: 50px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

.pf-infotext {
  font-family: 'Basic-Gothic', sans-serif !important;
  font-size: 12px !important;
  color: rgb(56, 25, 86) !important;
}

.pf-radiobutton {
  width: 100% !important;
  max-width: 1080px !important;
}

/* Radio Group Container - Flexbox für gleichmäßige Verteilung */
.pf-radiobutton .mat-radio-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Einzelne Radio Buttons - Flexgrow für gleichmäßige Breite */
.pf-radiobutton .mat-radio-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Radio Label als Button stylen */
.pf-radiobutton .mat-radio-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  font-family: 'DINosaur', sans-serif !important;
  font-size: 16px !important;
  color: rgb(56, 25, 86) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  padding: 0 15px !important;
}

.pf-radiobutton .mat-radio-button:hover .mat-radio-label {
  color: white !important;
}

.pf-radiobutton .mat-radio-button.mat-radio-checked .mat-radio-label {
  color: rgb(255, 255, 255) !important;
}

.pf-radiobutton .mat-radio-container {
  display: none !important;
}

.pf-radiobutton .mat-radio-label-content {
  padding: 0 !important;
  font-family: 'DINosaur', sans-serif !important;
  font-size: 16px !important;
  white-space: nowrap !important;
}

.pf-radiobutton .mat-form-field-underline {
  display: none !important;
}

.pf-radiobutton .mat-form-field-infix {
  border-top: 0 !important;
  padding: 0 !important;
}

.pf-radiobutton .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}

.pf-navigation.responsive-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1080px !important;
  padding-top: 30px;
}

.pf-navigation.responsive-column:empty,
.pf-navigation.responsive-column:not(:has(button)) {
  display: none !important;
}

.pf-navigation.responsive-column:has(button) {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-basis: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pf-navigation pas-input-button {
  width: 100% !important;
}

.pf-navigation button {
  width: 100% !important;
  height: 50px !important;
  font-family: 'DINosaur', sans-serif !important;
  font-size: 16px !important;
  color: rgb(255, 255, 255) !important;
  text-align: center !important;
  background-color: rgb(56, 25, 86) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  padding: 0 15px !important;
}

/* Hover-Effekt */
.pf-navigation button:hover {
  /* background-color: rgb(168, 61, 226) !important;
  color: white !important; */
  color: white !important;
}

/* Button Text */
.pf-navigation button .mat-button-wrapper {
  font-family: 'DINosaur', sans-serif !important;
  font-size: 16px !important;
}

.pf-navigation>pas-input-button {
  padding: unset !important;
}

pas-progress-view {
  display: none !important;
}

/* ============================================
   END OF ACREDIA DESIGN SYSTEM
   ============================================ */