/* MT Produktfinder – Styles, scoped unter .mt-pf-root
 *
 * Wichtig: Farbe und Schriftart werden auf JEDEM textführenden Element
 * explizit mit !important gesetzt statt nur einmal vererbt. Grund: native
 * <button>-Elemente (.pf-tile, .pf-option, .pf-btn-restart, ...) nehmen
 * Farbe/Schrift vom Theme (Elementor-Button-Grundstil) nicht automatisch
 * von .mt-pf-root an, eine direkt treffende Theme-Regel schlägt jede
 * geerbte Eigenschaft, unabhängig von deren Spezifität. Ohne !important
 * bleiben Buttons dann in Theme-Farbe/-Schrift hängen und wirken je nach
 * Theme unsichtbar (z.B. weißer Text auf hellem Grund).
 */

.mt-pf-root {
  --pf-primary: #0d5c8c;
  --pf-primary-dark: #073b5c;
  --pf-bg: #f7f9fb;
  --pf-surface: #ffffff;
  --pf-border: #d7dfe6;
  --pf-text: #1c2b36;
  --pf-text-muted: #5b6b76;
  --pf-locked: #aeb8c0;
  --pf-locked-bg: #eef1f3;
  --pf-radius: 10px;
  --pf-sans: "Nunito Sans", sans-serif;
  --pf-size-question: 20px;
  --pf-size-option: 15px;
  --pf-size-result: 26px;
  --pf-size-breadcrumb: 12px;
  --pf-size-hint: 13px;
  --pf-size-tile-hint: 11.5px;

  box-sizing: border-box;
  font-family: var(--pf-sans) !important;
  color: var(--pf-text) !important;
  max-width: 720px;
  margin: 0 auto;
}
.mt-pf-root *, .mt-pf-root *::before, .mt-pf-root *::after {
  box-sizing: border-box;
  font-family: inherit;
}

.mt-pf-root .pf-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: 28px 26px 22px;
  box-shadow: 0 1px 3px rgba(15, 40, 60, 0.06);
}

.mt-pf-root .pf-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--pf-sans) !important;
  font-size: var(--pf-size-breadcrumb) !important;
  color: var(--pf-text-muted) !important;
  margin-bottom: 18px;
  min-height: 16px;
}
.mt-pf-root .pf-trail .pf-crumb::after {
  content: "\203A";
  margin-left: 6px;
  color: var(--pf-locked) !important;
}
.mt-pf-root .pf-trail .pf-crumb:last-child::after { content: ""; }

.mt-pf-root .pf-question {
  font-family: var(--pf-sans) !important;
  font-size: var(--pf-size-question) !important;
  font-weight: var(--pf-question-weight, 600);
  line-height: 1.35;
  margin: 0 0 20px;
  color: var(--pf-question-color, var(--pf-text)) !important;
}

.mt-pf-root .pf-help {
  font-family: var(--pf-sans) !important;
  font-size: var(--pf-size-hint) !important;
  color: var(--pf-text-muted) !important;
  line-height: 1.5;
  margin: -12px 0 18px;
}

.mt-pf-root .pf-options {
  display: grid;
  gap: 10px;
}

.mt-pf-root .pf-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--pf-sans) !important;
  font-size: var(--pf-size-option) !important;
  font-weight: 500;
  color: var(--pf-text) !important;
  cursor: pointer;
  overflow-wrap: break-word;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.mt-pf-root .pf-option:hover { border-color: var(--pf-primary); background: #eef5fa; }
.mt-pf-root .pf-option:active { transform: scale(0.99); }
.mt-pf-root .pf-option:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
.mt-pf-root .pf-option .pf-arrow {
  font-family: var(--pf-sans) !important;
  color: var(--pf-primary) !important;
  flex-shrink: 0;
}

.mt-pf-root .pf-tiles {
  display: grid;
  /* minmax(0,1fr) statt 1fr: sonst darf der Inhalt (nowrap-Button-Text vom
     Theme) die Spalte über ihren Anteil hinaus aufdehnen -> ungleiche Breiten */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Bleibt bei einer ungeraden Anzahl Kacheln eine allein in der letzten
   Zeile übrig, wirkt sie halb so breit wie die anderen und "verwaist".
   Sie bekommt stattdessen die volle Breite der Zeile, bleibt dabei aber
   genauso hoch/gestaltet wie die übrigen Kacheln. */
.mt-pf-root .pf-tiles > .pf-tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .mt-pf-root .pf-tiles { grid-template-columns: minmax(0, 1fr); }
  .mt-pf-root .pf-tiles > .pf-tile:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.mt-pf-root .pf-tile {
  position: relative;
  text-align: left;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--pf-sans) !important;
  color: var(--pf-text) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  /* Globaler Theme-Button-Stil (Elementor) setzt Buttons auf
     "shrink-to-fit"-Breite statt auf die volle Grid-Zellenbreite zu
     strecken, dadurch wirken Kacheln mit kurzem Text (z.B. "Zubehör")
     schmaler als welche mit langem Text. Breite deshalb hart erzwingen. */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.mt-pf-root .pf-tile:hover:not([disabled]) { border-color: var(--pf-primary); background: #eef5fa; }
.mt-pf-root .pf-tile:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }
.mt-pf-root .pf-tile[disabled] {
  cursor: not-allowed;
  color: var(--pf-locked) !important;
  background: var(--pf-locked-bg);
}
.mt-pf-root .pf-tile-label {
  display: block;
  font-family: var(--pf-sans) !important;
  font-weight: 600;
  font-size: var(--pf-size-option) !important;
  margin-bottom: 4px;
  color: var(--pf-text) !important;
}
.mt-pf-root .pf-tile[disabled] .pf-tile-label { color: var(--pf-locked) !important; }
.mt-pf-root .pf-tile-hint {
  display: block;
  font-family: var(--pf-sans) !important;
  font-size: var(--pf-size-tile-hint) !important;
  color: var(--pf-text-muted) !important;
}
.mt-pf-root .pf-tile[disabled] .pf-tile-hint { color: var(--pf-locked) !important; }
.mt-pf-root .pf-tile-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--pf-sans) !important;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff3d6;
  color: #8a6100 !important;
}

.mt-pf-root .pf-result {
  text-align: center;
  padding: 8px 0 4px;
}
.mt-pf-root .pf-result-divider {
  height: 1px;
  background: var(--pf-border);
  margin: 22px 0;
}
.mt-pf-root .pf-result-image {
  display: block;
  max-width: min(220px, 100%);
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto 18px;
  border-radius: 8px;
  border: 1px solid var(--pf-border);
  background: #fff;
  padding: 10px;
}
.mt-pf-root .pf-result-eyebrow {
  font-family: var(--pf-sans) !important;
  font-size: var(--pf-size-hint) !important;
  text-transform: uppercase;
  color: var(--pf-text-muted) !important;
  margin: 0 0 10px;
}
.mt-pf-root .pf-result-name {
  font-size: var(--pf-size-result) !important;
  font-weight: 700;
  color: var(--pf-primary-dark) !important;
  margin: 0 0 18px;
  font-family: var(--pf-sans) !important;
}
.mt-pf-root .pf-result-link {
  display: inline-block;
  background: var(--pf-link-bg, var(--pf-primary)) !important;
  color: var(--pf-link-text, #ffffff) !important;
  text-decoration: none !important;
  font-family: var(--pf-sans) !important;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.mt-pf-root .pf-result-link:hover { background: var(--pf-primary-dark) !important; }

.mt-pf-root .pf-pending {
  text-align: center;
  padding: 10px 0 4px;
}
.mt-pf-root .pf-pending-name {
  font-family: var(--pf-sans) !important;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--pf-text) !important;
}
.mt-pf-root .pf-pending-text {
  font-family: var(--pf-sans) !important;
  color: var(--pf-text-muted) !important;
  font-size: var(--pf-size-hint) !important;
  line-height: 1.5;
  margin: 0;
}

.mt-pf-root .pf-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.mt-pf-root .pf-btn-back, .mt-pf-root .pf-btn-restart {
  background: none !important;
  border: none;
  font-family: var(--pf-sans) !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text-muted) !important;
  cursor: pointer;
  padding: 6px 4px;
}
.mt-pf-root .pf-btn-back:hover, .mt-pf-root .pf-btn-restart:hover { color: var(--pf-primary) !important; }

/* Mobile: kompaktere Abstände, volle Breite, kein horizontales Scrollen */
@media (max-width: 600px) {
  .mt-pf-root {
    max-width: 100%;
  }
  .mt-pf-root .pf-card {
    padding: 18px 16px 16px;
    border-radius: 8px;
  }
  .mt-pf-root .pf-question {
    margin: 0 0 14px;
  }
  .mt-pf-root .pf-help {
    margin: -8px 0 14px;
  }
  .mt-pf-root .pf-option {
    padding: 12px 14px;
  }
  .mt-pf-root .pf-tile {
    padding: 14px;
  }
  .mt-pf-root .pf-tile-badge {
    position: static;
    display: inline-block;
    margin-bottom: 6px;
  }
  .mt-pf-root .pf-nav {
    margin-top: 14px;
  }
  .mt-pf-root .pf-result-link {
    display: block;
    width: 100%;
  }
}