/* =========================================================
   Best Friends – Pflege-Finder
   Nur auf page-bf-pflegefinder.php geladen; alle Regeln sind
   auf .bf-pflegefinder begrenzt und ergänzen bf-style.css.
   ========================================================= */

.bf-pflegefinder {
  --bf-pf-green: #10b15b;
  --bf-pf-green-dark: #0b8f4a;
  --bf-pf-ink: #13251b;
  --bf-pf-text: #374745;
  --bf-pf-muted: #5d6e66;
  --bf-pf-line: rgba(148, 163, 184, 0.28);
  --bf-pf-soft: #ecf7ef;
  --bf-pf-pill: #e2f6eb;
  overflow-x: hidden;
  overflow-x: clip;
}

.bf-pflegefinder [hidden] {
  display: none !important;
}

.bf-pflegefinder .bf-pf-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bf-pflegefinder .bf-pf-icon {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Tastaturfokus: deckender Rahmen im dunklen Finder-Grün (mindestens 4,7 : 1
   auf Weiß, Hellgrün und den Pillen). Das frühere halbtransparente Grün war mit
   etwa 1,5 : 1 kaum zu sehen. */
.bf-pflegefinder a:focus-visible,
.bf-pflegefinder button:focus-visible,
.bf-pflegefinder summary:focus-visible,
.bf-pflegefinder select:focus-visible,
.bf-pflegefinder input:focus-visible {
  outline: 3px solid #087a3f;
  outline-offset: 2px;
}

/* Auf der grünen Terminleiste ist Grün unsichtbar: dort der dunkle Textton
   (3,9–5,7 : 1 über den ganzen Verlauf). */
.bf-pflegefinder .bf-pf-cta a:focus-visible {
  outline-color: var(--bf-pf-ink);
}

.bf-pflegefinder .bf-pf-title:focus {
  outline: none;
}

/* H1 wird nach der Rassenauswahl für Screenreader fokussiert.
   Da der Titel nicht über Tab erreichbar und kein Bedienelement ist,
   bleibt dieser programmatische Fokus ohne sichtbaren Rahmen.
   Fokusmarkierungen aller Bedienelemente bleiben unverändert. */

/* Die allgemeine Regel `.bf-startseite a { color: inherit }` darf
   Schaltflächen außerhalb der grünen CTA-Leiste nicht unlesbar machen. */
.bf-pflegefinder a.bf-btn-primary {
  color: #ffffff;
}

.bf-pflegefinder .bf-pf-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bf-pf-green-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bf-pflegefinder .bf-pf-text-link:hover {
  color: #087a3f;
}

/* Sobald eine Rasse gewählt wurde, steht der Pflegeinhalt im Vordergrund.
   Die Suche ist nur auf der Startansicht sichtbar; die Rassen-Neuwahl
   liegt als einfacher Link am Ende der ausgewählten Ansicht. */
@media (min-width: 901px) {
  .bf-pflegefinder [data-bf-pf-selected="true"] .bf-pf-hero-grid {
    grid-template-areas: "copy media";
    grid-template-rows: auto;
    align-items: center;
  }
}

.bf-pflegefinder .bf-pf-reselect {
  padding: 24px 0 0;
  background: #ffffff;
}

.bf-pflegefinder .bf-pf-reselect-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #087a3f;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bf-pflegefinder .bf-pf-reselect-link:hover {
  color: var(--bf-pf-ink);
}

/* ---------- Hero ---------- */

.bf-pflegefinder .bf-pf-hero {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.bf-pflegefinder .bf-pf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas:
    "copy media"
    "picker media";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 26px;
  align-items: start;
}

.bf-pflegefinder .bf-pf-hero-grid[data-bf-pf-media="none"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "copy"
    "picker";
}

.bf-pflegefinder .bf-pf-hero-grid[data-bf-pf-media="none"] .bf-pf-hero-copy,
.bf-pflegefinder .bf-pf-hero-grid[data-bf-pf-media="none"] .bf-pf-picker {
  max-width: 820px;
}

.bf-pflegefinder .bf-pf-hero-copy {
  grid-area: copy;
  min-width: 0;
}

.bf-pflegefinder .bf-pf-hero-media {
  grid-area: media;
  min-width: 0;
}

.bf-pflegefinder .bf-pf-picker {
  grid-area: picker;
  min-width: 0;
}

.bf-pflegefinder .bf-pf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bf-pflegefinder .bf-pf-kicker .bf-pf-icon {
  width: 22px;
  height: 22px;
}

.bf-pflegefinder .bf-pf-title {
  margin: 0 0 18px;
  overflow-wrap: break-word;
  hyphens: manual;
}

.bf-pflegefinder .bf-pf-lead {
  margin: 0 0 16px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
}

/* Persönliche Abstimmung im Ergebnis: Zwischenüberschrift, Text, WhatsApp-Link. */
.bf-pflegefinder .bf-pf-consult-title {
  margin: 0 0 8px;
  color: var(--bf-pf-ink);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.bf-pflegefinder .bf-pf-consult-action {
  margin: -6px 0 16px;
}

.bf-pflegefinder .bf-pf-coat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 14px;
  color: var(--bf-pf-muted);
  font-size: 15px;
}

.bf-pflegefinder .bf-pf-coat-value {
  color: var(--bf-pf-ink);
  font-weight: 700;
}

/* Dunkleres Finder-Grün wie die übrigen Textlinks (4,95 : 1 auf Hellgrün). */
.bf-pflegefinder .bf-pf-coat-change {
  color: #087a3f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bf-pflegefinder .bf-pf-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(191, 117, 55, 0.25);
  border-radius: 14px;
  background: #fffaf3;
  color: #5b3b1d;
  font-size: 15px;
  line-height: 1.5;
}

.bf-pflegefinder .bf-pf-message-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #ad6a32;
}

.bf-pflegefinder .bf-pf-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--bf-pf-text);
  font-size: 14.5px;
  line-height: 1.55;
}

.bf-pflegefinder .bf-pf-disclaimer-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--bf-pf-green-dark);
}

/* ---------- Auswahl (ohne und mit JavaScript) ---------- */

.bf-pflegefinder .bf-pf-picker {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--bf-pf-line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.bf-pflegefinder .bf-pf-label {
  display: block;
  margin: 0 0 10px;
  color: var(--bf-pf-ink);
  font-size: 17px;
  font-weight: 700;
}

.bf-pflegefinder .bf-pf-select-row,
.bf-pflegefinder .bf-pf-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bf-pflegefinder .bf-pf-select,
.bf-pflegefinder .bf-pf-search-input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid rgba(19, 37, 27, 0.22);
  border-radius: 14px;
  background: #ffffff;
  color: var(--bf-pf-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  box-shadow: none;
}

/* min-width: 0 – sonst ist die Liste so breit wie der längste Rassename
   und ragt auf 320 px über den Rand (gemessen 336 px). */
.bf-pflegefinder .bf-pf-select {
  flex: 1 1 260px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.bf-pflegefinder .bf-pf-search-input::placeholder {
  color: #74847d;
  opacity: 1;
}

/* Suchfeld und Auswahlliste: sichtbarer Rahmen statt nur eines blassen
   Schattens (der Outline bleibt, auch für Kontrastmodi). */
.bf-pflegefinder .bf-pf-select:focus,
.bf-pflegefinder .bf-pf-search-input:focus {
  border-color: #087a3f;
  outline: 3px solid #087a3f;
  outline-offset: 2px;
  box-shadow: none;
}

.bf-pflegefinder .bf-pf-submit,
.bf-pflegefinder .bf-pf-show-all {
  min-height: 52px;
}

.bf-pflegefinder .bf-pf-show-all {
  border: 1.6px solid rgba(16, 177, 91, 0.45);
}

.bf-pflegefinder .bf-pf-search-field {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.bf-pflegefinder .bf-pf-search-field .bf-pf-search-input {
  padding-right: 52px;
}

.bf-pflegefinder .bf-pf-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--bf-pf-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.bf-pflegefinder .bf-pf-clear:hover {
  background: rgba(16, 177, 91, 0.08);
  color: var(--bf-pf-ink);
}

.bf-pflegefinder .bf-pf-search-status {
  min-height: 1.5em;
  margin: 10px 0 0;
  color: var(--bf-pf-muted);
  font-size: 14px;
  line-height: 1.5;
}

.bf-pflegefinder .bf-pf-search-status:empty {
  min-height: 0;
  margin: 0;
}

.bf-pflegefinder .bf-pf-listbox {
  position: relative;
  max-height: min(360px, 55vh);
  margin: 10px 0 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--bf-pf-line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.bf-pflegefinder .bf-pf-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--bf-pf-ink);
  cursor: pointer;
}

.bf-pflegefinder .bf-pf-option:hover,
.bf-pflegefinder .bf-pf-option.is-active {
  background: var(--bf-pf-pill);
}

/* Aktive Option (Pfeiltasten, aria-activedescendant): deckender Innenrahmen. */
.bf-pflegefinder .bf-pf-option.is-active {
  box-shadow: inset 0 0 0 2px #087a3f;
}

.bf-pflegefinder .bf-pf-option-name {
  font-weight: 600;
  line-height: 1.3;
}

.bf-pflegefinder .bf-pf-option-alias {
  color: var(--bf-pf-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Rasse nicht dabei oder Mischling: Kontakt statt Fellbeschreibung */
.bf-pflegefinder .bf-pf-contact {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bf-pf-line);
}

.bf-pflegefinder .bf-pf-contact-text {
  margin: 0 0 4px;
  color: var(--bf-pf-text);
  font-size: 15.5px;
  line-height: 1.55;
}

.bf-pflegefinder .bf-pf-contact-question {
  display: block;
  color: var(--bf-pf-ink);
  font-weight: 700;
}

/* Auswahl-Schaltflächen (Fellvariante einer Rasse) */
.bf-pflegefinder .bf-pf-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.bf-pflegefinder .bf-pf-choice {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid rgba(16, 177, 91, 0.45);
  border-radius: 14px;
  background: #ffffff;
  color: var(--bf-pf-ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bf-pflegefinder .bf-pf-choice:hover {
  border-color: var(--bf-pf-green);
  background: rgba(16, 177, 91, 0.06);
}

/* ---------- Bildbereich ---------- */

.bf-pflegefinder .bf-pf-figure {
  margin: 0;
}

/* Einheitlicher Bildausschnitt ohne graue Seitenflaechen: Das Foto fuellt
   den Rahmen, unabhaengig vom Quellformat (Hoch-/Querformat).
   Die Blickposition bleibt etwas oberhalb der Mitte, damit der Hundekopf
   auch bei leichtem Beschnitt voll sichtbar bleibt. */
.bf-pflegefinder .bf-pf-figure-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(72vh, 600px);
  overflow: hidden;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
}

.bf-pflegefinder .bf-pf-figure-frame img {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 30%;
}

.bf-pflegefinder .bf-pf-figure-caption {
  margin-top: 10px;
  color: var(--bf-pf-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.bf-pflegefinder .bf-pf-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 32px 24px;
  border: 1px dashed rgba(16, 177, 91, 0.35);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--bf-pf-green-dark);
  text-align: center;
}

.bf-pflegefinder .bf-pf-fallback-icon {
  width: 64px;
  height: 64px;
}

.bf-pflegefinder .bf-pf-fallback-name {
  color: var(--bf-pf-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.bf-pflegefinder .bf-pf-preview {
  padding: clamp(22px, 3vw, 32px);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.bf-pflegefinder .bf-pf-preview-title {
  margin: 0 0 14px;
  color: var(--bf-pf-ink);
  font-size: 18px;
  font-weight: 700;
}

.bf-pflegefinder .bf-pf-preview-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-pflegefinder .bf-pf-preview-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--bf-pf-text);
  line-height: 1.5;
}

.bf-pflegefinder .bf-pf-preview-check {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bf-pf-pill);
  color: var(--bf-pf-green-dark);
}

/* ---------- Pflegeablauf ---------- */

.bf-pflegefinder .bf-pf-steps-section {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: 0;
}

.bf-pflegefinder .bf-pf-section-intro {
  max-width: 720px;
  margin-bottom: 26px;
}

.bf-pflegefinder .bf-pf-section-intro .bf-heading-xl {
  margin-bottom: 0;
}

/* Ablauf: ein gemeinsames Raster für alle Karten – Schritte, Karte 3a und
   „Gut zu wissen“ in Lesereihenfolge (keine order-Tricks). Spalten:
   1 bis 767 px, 2 ab 768 px, 3 ab 1100 px. Jede Zeile wächst mit ihrer
   höchsten Karte; keine festen Höhen, kein Abschneiden. */
.bf-pflegefinder .bf-pf-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.bf-pflegefinder .bf-pf-step,
.bf-pflegefinder .bf-pf-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--bf-pf-line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.bf-pflegefinder .bf-pf-step[data-bf-pf-step="result"] {
  border-color: rgba(16, 177, 91, 0.35);
  background: var(--bf-pf-soft);
}

/* Optionale Karte 3a: ruhig, im Aufbau wie „Das Ergebnis“ – helles Türkis,
   feine hellblaue Linie, Textbadge. Keine Warnfarben, kein Strich, keine Leiste. */
.bf-pflegefinder .bf-pf-step--optional {
  border-color: #b9dceb;
  background: #eaf7f5;
}

.bf-pflegefinder .bf-pf-step--optional .bf-pf-step-icon,
.bf-pflegefinder .bf-pf-step--optional .bf-pf-step-number {
  background: #ffffff;
  color: #165f63;
}

.bf-pflegefinder .bf-pf-step-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #d7efec;
  color: #165f63;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.bf-pflegefinder .bf-pf-step--optional .bf-pf-step-title {
  color: #193c3d;
}

.bf-pflegefinder .bf-pf-step--optional .bf-pf-step-text,
.bf-pflegefinder .bf-pf-step-note {
  color: #304948;
}

.bf-pflegefinder .bf-pf-step-note {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

/* Informationslinks einer Karte (Leistungsseiten mit Anker): ruhige
   Textlinks, bei Platzmangel untereinander. In regulären Karten grün, in der
   SPA-Karte türkis. */
.bf-pflegefinder .bf-pf-step-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}

/* Auf weißen Karten das dunklere Finder-Grün (wie beim Hover der Textlinks),
   damit 16-px-Linktext mindestens 4,5 : 1 Kontrast erreicht. */
.bf-pflegefinder .bf-pf-step-link {
  color: #087a3f;
}

.bf-pflegefinder .bf-pf-step-link:hover {
  color: var(--bf-pf-ink);
}

.bf-pflegefinder .bf-pf-step--optional .bf-pf-step-link {
  color: #165f63;
}

.bf-pflegefinder .bf-pf-step--optional .bf-pf-step-link:hover {
  color: #193c3d;
}

/* Deutlicher dunkeltürkiser Fokusrahmen mit Abstand für die Tastatur. Der
   gepunktete Rahmen des Eltern-Themes (a:focus) nach einem Mausklick entfällt. */
.bf-pflegefinder .bf-pf-step--optional a:focus-visible {
  outline: 3px solid #165f63;
  outline-offset: 3px;
}

.bf-pflegefinder .bf-pf-step--optional a:focus:not(:focus-visible) {
  outline: none;
}

/* Gleicher deutlicher Fokus für die Informationslinks der übrigen Karten. */
.bf-pflegefinder .bf-pf-step:not(.bf-pf-step--optional) .bf-pf-step-link:focus-visible {
  outline: 3px solid #087a3f;
  outline-offset: 3px;
}

.bf-pflegefinder .bf-pf-step:not(.bf-pf-step--optional) .bf-pf-step-link:focus:not(:focus-visible) {
  outline: none;
}

/* Darf umbrechen: bei sehr großer Schrift rutscht z. B. das Ergebnisfoto in
   eine eigene Zeile, statt über den Kartenrand zu ragen. */
.bf-pflegefinder .bf-pf-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.bf-pflegefinder .bf-pf-step-icon {
  display: inline-flex;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 11px;
  border-radius: 16px;
  background: var(--bf-pf-pill);
  color: var(--bf-pf-green-dark);
}

.bf-pflegefinder .bf-pf-step[data-bf-pf-step="result"] .bf-pf-step-icon {
  background: #ffffff;
}

/* Kleines rundes Rassefoto rechts in der Kopfzeile von „Das Ergebnis“. Die
   negativen Ränder halten die Kopfzeile so hoch wie in den Nachbarkarten,
   damit die Titel einer Zeile auf gleicher Höhe bleiben. */
.bf-pflegefinder .bf-pf-result-photo {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin: -4px 0 -4px auto;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(16, 177, 91, 0.22);
  object-fit: cover;
  object-position: center 30%;
}

/* Ohne Großschreibung, damit „3a“ nicht als „3A“ erscheint. */
.bf-pflegefinder .bf-pf-step-number {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bf-pf-pill);
  color: #166534;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.bf-pflegefinder .bf-pf-step[data-bf-pf-step="result"] .bf-pf-step-number {
  background: #ffffff;
}

.bf-pflegefinder .bf-pf-step-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
}

.bf-pflegefinder .bf-pf-step-title {
  margin: 4px 0 0;
  color: var(--bf-pf-ink);
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: manual;
}

.bf-pflegefinder .bf-pf-step-text {
  margin: 0;
  color: var(--bf-pf-text);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Überlange Wörter (z. B. bei vergrößerter Schrift) brechen in der Karte um,
   statt über den Rand zu laufen. */
.bf-pflegefinder .bf-pf-step-text,
.bf-pflegefinder .bf-pf-step-note,
.bf-pflegefinder .bf-pf-notes-list li {
  overflow-wrap: break-word;
}

/* „Gut zu wissen“: letzte Karte des Rasters, ohne Nummer, im bisherigen
   warmen Ton. Fehlermeldungen und die persönliche Abstimmung bleiben eigene
   Darstellungen außerhalb dieses Rasters. */
.bf-pflegefinder .bf-pf-notes {
  border-color: rgba(191, 117, 55, 0.2);
  background: #fffaf3;
}

.bf-pflegefinder .bf-pf-notes .bf-pf-step-icon {
  background: #ffffff;
  color: #ad6a32;
}

.bf-pflegefinder .bf-pf-notes-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-pflegefinder .bf-pf-notes-list li {
  position: relative;
  padding-left: 20px;
  color: var(--bf-pf-text);
  font-size: 15.5px;
  line-height: 1.6;
}

.bf-pflegefinder .bf-pf-notes-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d39a63;
}

/* „Andere Rasse wählen“, „Pflege persönlich besprechen“: dunkleres Finder-Grün
   wie die Themenlinks (5,4 : 1 auf Weiß, 4,95 : 1 auf Hellgrün). */
.bf-pflegefinder .bf-pf-contact-link,
.bf-pflegefinder .bf-pf-consult-link {
  color: #087a3f;
}

.bf-pflegefinder .bf-pf-contact-link:hover,
.bf-pflegefinder .bf-pf-consult-link:hover,
.bf-pflegefinder .bf-pf-coat-change:hover {
  color: var(--bf-pf-ink);
}

/* ---------- CTA ---------- */

.bf-pflegefinder .bf-pf-cta-section {
  padding-top: clamp(36px, 5vw, 56px);
}

/* Nach dem Ablauf trägt nur noch der Terminblock den Abstand (statt Abstand
   unten am Ablauf plus Abstand oben am Terminblock). */
.bf-pflegefinder .bf-pf-body:has(.bf-pf-steps-section) + .bf-pf-reselect + .bf-pf-cta-section {
  padding-top: clamp(28px, 3.2vw, 44px);
}

.bf-pflegefinder .bf-pf-cta {
  margin-top: 0;
}

.bf-pflegefinder .bf-pf-cta .bf-cta-bar-title {
  margin: 0 0 4px;
  color: #ffffff;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.3;
}

.bf-pflegefinder .bf-pf-cta .bf-cta-bar-text {
  margin: 0;
}

/* Aktueller Menüpunkt im mobilen Menü (diese Datei lädt nur auf der Finder-Seite). */
.page-template-page-bf-pflegefinder .bf-mobile-nav a[aria-current="page"] {
  background: rgba(16, 177, 91, 0.075);
  color: #0b8f4a;
  font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (min-width: 768px) {
  .bf-pflegefinder .bf-pf-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .bf-pflegefinder .bf-pf-step,
  .bf-pflegefinder .bf-pf-notes {
    padding: 22px;
  }
}

@media (min-width: 1100px) {
  .bf-pflegefinder .bf-pf-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bf-pflegefinder .bf-pf-step,
  .bf-pflegefinder .bf-pf-notes {
    padding: 24px;
  }
}

@media (max-width: 900px) {
  .bf-pflegefinder .bf-pf-hero-grid,
  .bf-pflegefinder .bf-pf-hero-grid[data-bf-pf-media="none"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: none;
  }

  .bf-pflegefinder .bf-pf-hero-copy,
  .bf-pflegefinder .bf-pf-hero-media,
  .bf-pflegefinder .bf-pf-picker {
    grid-area: auto;
  }

  /* Vor einer Auswahl steht die Suche direkt unter der Einleitung. */
  .bf-pflegefinder [data-bf-pf-kind="initial"] .bf-pf-picker,
  .bf-pflegefinder [data-bf-pf-kind="invalid"] .bf-pf-picker {
    order: 1;
  }

  .bf-pflegefinder [data-bf-pf-kind="initial"] .bf-pf-hero-media,
  .bf-pflegefinder [data-bf-pf-kind="invalid"] .bf-pf-hero-media {
    order: 2;
  }

  .bf-pflegefinder .bf-pf-figure-frame {
    max-height: min(62vh, 480px);
  }

  .bf-pflegefinder .bf-pf-fallback {
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  .bf-pflegefinder .bf-inner {
    padding: 0 4px;
  }

  .bf-pflegefinder .bf-pf-submit,
  .bf-pflegefinder .bf-pf-show-all {
    width: 100%;
  }

  .bf-pflegefinder .bf-pf-choice {
    width: 100%;
  }

  .bf-pflegefinder .bf-pf-cta .bf-cta-buttons,
  .bf-pflegefinder .bf-pf-cta .bf-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-pflegefinder .bf-pf-choice {
    transition: none;
  }
}


/* Pflege-Finder Rassebeispiele: Rechtsklick trifft den Seitencontainer
   statt das <img> ('Bild speichern unter'). Kein Kopierschutz gegen
   Screenshots oder die Originaldatei-URL; keine Auswirkung auf Screenreader. */
.bf-pflegefinder .bf-pf-figure-frame img,
.bf-pflegefinder .bf-pf-result-photo {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}