@charset "UTF-8";
:root {
  /* ========================
     Typography & Icons
  ========================= */
  --fw-font-family: BlinkMacSystemFont, -apple-system, 'Open Sans', 'Helvetica', Arial, 'Segoe UI', sans-serif;
  --fw-font-headeline: 'Roboto', Arial, sans-serif;
  /* Tippfehler im Namen bleibt aus Kompatibilitätsgründen */
  --font-icon: 'Font Awesome 5';
  /* ========================
     Brand & Action Colors
  ========================= */
  --color-icon: #4C6FC6;
  --color-attribute-icon: #000000;
  --color-iconcheck: #43A063;
  --color-offericon: #3c7c35;
  --color-offericon-back: #e9f5e9;
  --color-offericon-hover: #b7d6b7;
  --color-link: #3E61B7;
  --color-link-hover: #4C6FC6;
  /* ========================
   Primary CTA Button
========================= */
  --color-cta: #4C6FC6;
  --color-ctafont: #FFFFFF;
  --color-ctah: #3E61B7;
  /* ========================
 List-Item Buttons
========================= */
  --color-list-button: #4C6FC6;
  --color-list-button-font: #FFFFFF;
  --color-list-button-hover: #3E61B7;
  /* ========================
     Secondary CTA Button
  ========================= */
  --color-sec: #CCCCCC;
  --color-secfont: #3E61B7;
  --color-sech: #F3F4F6;
  --color-secb: #FFFFFF;
  /* ========================
     Text Colors
  ========================= */
  --text-color: #1a1a1a;
  --text-color-headline: #4D72A6;
  --text-color-light: #666666;
  --text-color-placeholder: #666666;
  --text-color-formfields: #333333;
  --text-color-oldprice: #d13438;
  /* ========================
     Form Elemente
  ========================= */
  --border-color-formfields: #CCCCCC;
  --back-color-formfields: #FFFFFF;
  --color-radio-offer: #5392f9;
  /* ========================
     Neutrals & UI Grays
  ========================= */
  --color-blue-dark: #20274D;
  --color-gray-100: #F8F8F8;
  --color-gray-200: #E9E9E9;
  --color-gray-300: #E6E6E6;
  --color-gray-400: #ABABAB;
  --image-back-color: #E9E9E9;
  --color-layout-1: #eff4fc;
  --color-layout-2: #20274D;
  --color-layout-3: #4d72a6;
  /* ========================
     Footer & Copy
  ========================= */
  --color-footer: #1E4377;
  --color-footer-tx: #D7D7DB;
  --color-copy: #4B535A;
  --btn-text-hover: #ffffff;
  /* ========================
     Custom / Special
  ========================= */
  --color-custom-bg: #E9EBEE;
  --color-custom-tx: #333333;
  --color-few-solid: #DDDFE2;
  --color-few-vote: #43A063;
  --color-vote-back: #f4f7f4;
  --color-infobox-back: #eff4fc;
  --color-infobox-border: #d7dff2;
  /* ========================
     Booking steps
  ========================= */
  --color-bockingstep-Icon:#2067DA;
  --color-bockingstep-font:#4d72a6;
  --color-bockingstep-main:#4d72a6;
  --color-bockingstep-back:#eff4fc;
  --color-imPreis-font:#087b1b;
  --color-imPreis-back:#F4FAF5;
  --color-radio-booking:#499e4e;
  /* ========================
     Bestaetigung/Warnung/Info/Highlight
  ========================= */
  --color-confirm-font:#087b1b;
  --color-confirm-back:#F4FAF5;
  --color-warning-font:#D97A5F;
  --color-warning-back:#FDF1EC;
  --color-info-font:#4c6fc6;
  --color-info-back:#eff4fc;
  --color-highlight-font:#f3b300;
  --color-highlight-back:#fff8e8;
  --color-highlight-new: #ea6024;
  /* ========================
     Radii
  ========================= */
  --radius-button: 5px;
  --radius-box: 6px;
  /* ========================
   Loader / Overlay
  ========================= */
  --color-loader-overlay: rgba(0, 0, 0, .35);
}
.flick_slider .flickity-viewport {
  width: 100%;
}
.flick_slider .listFlickityItem {
  width: calc(100% / 4 - 14px);
  min-height: max-content;
  height: auto;
}
.flick_slider .flickity-page-dots {
  bottom: -36px;
  width: auto;
  text-align: left;
  transform: translateX(0);
  left: 6px;
}
.flick_slider .dot {
  width: 7px;
  height: 7px;
  margin-right: 3px;
  margin-left: 3px;
  background-color: var(--color-gray-400);
  border: 0 solid;
}
.flick_slider .dot.is-selected {
  background-color: var(--color-custom-tx);
}
.flick_slider .flickity-button {
  color: var(--color-list-button-font);
  margin-top: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  -webkit-border-radius: var(--radius-button);
  -moz-border-radius: var(--radius-button);
  border-radius: var(--radius-button);
  top: unset;
  bottom: 0;
  transform: translate(0, calc(100% + 14px));
  background: var(--color-custom-tx);
  cursor: pointer;
}
.flick_slider .flickity-button.next {
  right: 7px;
}
.flick_slider .flickity-button.previous {
  left: calc(100% - 78px);
}
.flick_slider .flickity-button:hover {
  background: var(--color-gray-400);
}