/* Zentraler Token-Einstieg – nur diese Datei in Komponenten importieren */
/* Legacy-Aliasse (Kompatibilität) */
/* -----------------------------------
   Theme: DARK
   ----------------------------------- */
.oM-dark {
  background-color: #141E39;
  color: #FFFFFF;
}
.oM-dark .primary {
  color: #FFFFFF;
}
.oM-dark .secondary {
  color: #DDDFE4;
}
.oM-dark .overline {
  color: #4277FC;
}
.oM-dark .divider {
  border-color: #1F2E53;
}
.oM-dark .table,
.oM-dark table {
  border-color: #141E39;
}
.oM-dark .mistake-font {
  color: #FA6E6E;
}
.oM-dark .mistake-bg {
  background-color: #FA6E6E;
}
.oM-dark input,
.oM-dark textarea {
  background-color: #FFFFFF;
  color: #1F2E53;
}
.oM-dark input::placeholder,
.oM-dark textarea::placeholder {
  color: #A4AABA;
  opacity: 1;
}
.oM-dark input:disabled,
.oM-dark textarea:disabled {
  color: #647190;
}
.oM-dark .btn--primary {
  color: #FFFFFF;
  background-color: #4277FC;
}
.oM-dark .btn--primary:hover {
  background-color: #284797;
}
.oM-dark .btn--primary:active {
  background-color: #355FCA;
}
.oM-dark .btn--secondary {
  color: #FFFFFF;
  background-color: transparent;
}
.oM-dark .btn--secondary:hover {
  background-color: rgba(40, 71, 151, 0.2);
}
.oM-dark .btn--secondary:active {
  background-color: rgba(53, 95, 202, 0.25);
}
.oM-dark .badge {
  background-color: #284797;
  color: #FFFFFF;
}
/* -----------------------------------
   Theme: WHITE (hell)
   ----------------------------------- */
.oM-white {
  background-color: #FFFFFF;
  color: #1F2E53;
}
.oM-white .primary {
  color: #1F2E53;
}
.oM-white .secondary {
  color: #647190;
}
.oM-white .overline {
  color: #4277FC;
}
.oM-white .divider {
  border-color: #DEE2ED;
}
.oM-white .table,
.oM-white table {
  border-color: #DEE2ED;
}
.oM-white .mistake-font {
  color: #FA6E6E;
}
.oM-white .mistake-bg {
  background-color: #FA6E6E;
}
.oM-white input,
.oM-white textarea {
  background-color: #FFFFFF;
  color: #1F2E53;
}
.oM-white input::placeholder,
.oM-white textarea::placeholder {
  color: #A4AABA;
  opacity: 1;
}
.oM-white input:disabled,
.oM-white textarea:disabled {
  color: #647190;
}
.oM-white .btn--primary {
  color: #FFFFFF;
  background-color: #4277FC;
}
.oM-white .btn--primary:hover {
  background-color: #ECF1FF;
}
.oM-white .btn--primary:active {
  background-color: #C5D5FE;
}
.oM-white .btn--secondary {
  color: #1F2E53;
  background-color: transparent;
}
.oM-white .btn--secondary:hover {
  background-color: rgba(236, 241, 255, 0.4);
}
.oM-white .btn--secondary:active {
  background-color: rgba(197, 213, 254, 0.45);
}
.oM-white .badge {
  background-color: #C5D5FE;
  color: #4277FC;
}
/* -----------------------------------
   Theme: GREY (helle graue Fläche)
   ----------------------------------- */
.oM-grey {
  background-color: #F6F7FA;
  color: #1F2E53;
}
.oM-grey .primary {
  color: #1F2E53;
}
.oM-grey .secondary {
  color: #647190;
}
.oM-grey .overline {
  color: #4277FC;
}
.oM-grey .divider {
  border-color: #DEE2ED;
}
.oM-grey .table,
.oM-grey table {
  border-color: #DEE2ED;
}
.oM-grey .mistake-font {
  color: #FA6E6E;
}
.oM-grey .mistake-bg {
  background-color: #FA6E6E;
}
.oM-grey input,
.oM-grey textarea {
  background-color: #FFFFFF;
  color: #1F2E53;
}
.oM-grey input::placeholder,
.oM-grey textarea::placeholder {
  color: #A4AABA;
  opacity: 1;
}
.oM-grey input:disabled,
.oM-grey textarea:disabled {
  color: #647190;
}
.oM-grey .btn--primary {
  color: #FFFFFF;
  background-color: #4277FC;
}
.oM-grey .btn--primary:hover {
  background-color: #ECF1FF;
}
.oM-grey .btn--primary:active {
  background-color: #C5D5FE;
}
.oM-grey .btn--secondary {
  color: #1F2E53;
  background-color: transparent;
}
.oM-grey .btn--secondary:hover {
  background-color: rgba(236, 241, 255, 0.4);
}
.oM-grey .btn--secondary:active {
  background-color: rgba(197, 213, 254, 0.45);
}
.oM-grey .badge {
  background-color: #C5D5FE;
  color: #4277FC;
}
.container,
.page-container,
.content {
  background: transparent;
}
/* Gewichte */
/* Phone */
/* Tablet (eigene Variablen – gleiche Werte wie Phone) */
/* Desktop Small (1024–1439) */
/* Desktop (≥1440) – identisch, eigene Variablen */
/* Kompaktes Typo-Mixin */
/* Padding je Breakpoint */
/* Schrift je Breakpoint */
/* Primary Farben */
/* Secondary (Outline) – Light */
/* Secondary (Outline) – Dark */
/* Disabled & Focus */
.product-guide {
  margin-top: 100px;
}
.product-guide .flex-box {
  display: flex;
}
.product-guide [data-question-id="1"] .progress-bar {
  background: linear-gradient(to right, #4277FC 20%, #1F2E53 20%);
}
.product-guide [data-question-id="2"] .progress-bar {
  background: linear-gradient(to right, #4277FC 40%, #1F2E53 40%);
}
.product-guide [data-question-id="3"] .progress-bar {
  background: linear-gradient(to right, #4277FC 60%, #1F2E53 60%);
}
.product-guide [data-question-id="4"] .progress-bar {
  background: linear-gradient(to right, #4277FC 80%, #1F2E53 80%);
}
.product-guide [data-question-id="5"] .progress-bar {
  background: #4277FC;
}
.product-guide .answer,
.product-guide .result-answer {
  min-height: 320px;
  padding-bottom: 60px;
}
.product-guide .answer.activeQuestion,
.product-guide .result-answer.activeQuestion {
  display: block !important;
}
.product-guide .answer .title,
.product-guide .result-answer .title {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 40px;
  font-weight: 400;
  color: #1F2E53;
}
.product-guide .answer .info,
.product-guide .result-answer .info {
  font-size: 12px;
  font-weight: 400;
}
.product-guide .answer .button {
  position: absolute;
  bottom: 0;
  right: 15px;
}
.product-guide .question {
  height: 500px;
  background-color: #10182E;
  padding: 32px;
  text-align: center;
}
.product-guide .question .bg {
  background-position: center 0;
  background-repeat: no-repeat;
  height: 185px;
  position: absolute;
  width: 100%;
  z-index: 1;
  top: -100px;
}
.product-guide .question img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
.product-guide .help {
  margin-top: 24px;
  border-radius: 8px;
  background-color: #F6F7FA;
  border: 1px solid #DEE2ED;
  padding: 24px;
}
.product-guide .quiz-subline {
  font-size: 16px;
}
.product-guide .quiz-back {
  color: #647190;
  margin-left: 32px;
}
.product-guide .quiz-back:hover,
.product-guide .quiz-back:focus {
  text-decoration: none;
}
.product-guide .button {
  width: 100%;
}
.product-guide .legal-notice {
  margin-top: 16px;
  font-size: 12px;
  line-height: 18px;
  color: #647190;
}
.progress-bar {
  width: 100%;
  height: 8px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-option {
  cursor: pointer;
  background-color: #F6F7FA;
  border: 1px solid #DEE2ED;
  border-radius: 8px;
}
.quiz-option input[type="radio"] {
  display: none;
}
/*
 * Quiz-Antwortzeile: Flex statt Grid + !important — schützt vor überschreibenden Regeln aus Bundles,
 * sonst wirken Buchstabe + Text wie „A1 /“ (ein Fließtext).
 */
.product-guide label.quiz-option .quiz-answer {
  padding: 24px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.product-guide label.quiz-option .quiz-answer.selected {
  background-color: #fff;
  border-radius: 8px;
}
.product-guide label.quiz-option .quiz-answer.selected > .quiz-letter {
  background-color: #4277fc;
  color: #fff;
}
.product-guide label.quiz-option .quiz-answer > .quiz-letter {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dee2ed;
  font-weight: 700;
  font-size: 16px;
  color: #1f2e53;
  line-height: 1;
}
/* Bindestrich-Name: Fluid/XML kann „__“ in Klassen verfälschen → Aliase */
.product-guide label.quiz-option .quiz-answer > .quiz-answer-text,
.product-guide label.quiz-option .quiz-answer > .quiz-answer__text,
.product-guide label.quiz-option .quiz-answer > .quiz-answer_text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 500;
  color: #1f2e53;
}
.button {
  margin-top: 20px;
}
.quiz-progress {
  margin-top: 10px;
  font-size: 0.9em;
  color: #666;
}
[data-question-id],
div[data-answer-id] {
  display: none;
}
@media (max-width: 767px) {
  .product-guide .answer .title,
  .product-guide .result-answer .title {
    font-size: 32px;
    line-height: 40px;
  }
}
.product-guide .answer .title,
.product-guide .result-answer .title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 16px;
}
.product-guide .answer .title .sub,
.product-guide .result-answer .title .sub {
  font-size: 14px;
  line-height: 24px;
  margin-top: 16px;
  color: #64739A;
}
@media (max-width: 1299px) {
  .product-guide .question-block {
    padding: 70px 30px 0 30px;
  }
}
@media (max-width: 699px) {
  .product-guide .flex-box {
    display: inherit;
  }
  .product-guide .question-block {
    min-height: 155px;
    padding-bottom: 20px;
    font-size: 24px;
    line-height: 32px;
  }
  .product-guide .answers {
    min-height: 400px;
  }
}
.product-guide .show-online-drawer {
  float: right;
  right: 0px;
}
.product-guide label.quiz-option {
  font-weight: 500;
}
.quiz-next,
.quiz-final,
.product-guide .show-online-drawer {
  float: right;
  right: 0px;
}

/* ProductSoftwareFitGuide: 7 Schritte + Mehrfachauswahl (nur .product-guide.software-fit-quiz) */
.product-guide.software-fit-quiz [data-question-id="1"] .progress-bar {
  background: linear-gradient(to right, #4277fc 14.29%, #1f2e53 14.29%);
}
.product-guide.software-fit-quiz [data-question-id="2"] .progress-bar {
  background: linear-gradient(to right, #4277fc 28.57%, #1f2e53 28.57%);
}
.product-guide.software-fit-quiz [data-question-id="3"] .progress-bar {
  background: linear-gradient(to right, #4277fc 42.86%, #1f2e53 42.86%);
}
.product-guide.software-fit-quiz [data-question-id="4"] .progress-bar {
  background: linear-gradient(to right, #4277fc 57.14%, #1f2e53 57.14%);
}
.product-guide.software-fit-quiz [data-question-id="5"] .progress-bar {
  background: linear-gradient(to right, #4277fc 71.43%, #1f2e53 71.43%);
}
.product-guide.software-fit-quiz [data-question-id="6"] .progress-bar {
  background: linear-gradient(to right, #4277fc 85.71%, #1f2e53 85.71%);
}
.product-guide.software-fit-quiz [data-question-id="7"] .progress-bar {
  background: #4277fc;
}

.product-guide.software-fit-quiz .quiz-options--multiple label.quiz-option {
  position: relative;
}

.product-guide.software-fit-quiz .quiz-options--multiple .quiz-option input[type="checkbox"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  border: none;
}

.product-guide.software-fit-quiz .quiz-options--multiple .quiz-option .quiz-answer {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.product-guide.software-fit-quiz .quiz-options--multiple .quiz-hint {
  font-size: 14px;
  line-height: 22px;
  color: #64739a;
  margin: 0 0 12px;
}