/* ═══════════════════════════════════════════════════════════════
   Oekoboiler Boilerfinder – Frontend CSS
   Design: Clean Swiss Tech – frisch, vertrauenswürdig, grün
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Auf die CI-Tokens umgelegt (2026-09-10). Die Namen des Plugins bleiben,
       damit seine 738 Zeilen unveraendert weiterfunktionieren — nur die Werte
       kommen jetzt aus ci-tokens.css. Faellt ci.css einmal aus, greifen die
       Rueckfallwerte dahinter. */
    --bf-green:      var(--ob-action-primary, #355860);
    --bf-green-lt:   var(--ob-petrol-50, #EDF1F2);
    --bf-green-mid:  var(--ob-action-primary-hover, #2D4B53);
    --bf-charcoal:   var(--ob-text-primary, #1A1F21);
    --bf-gray:       var(--ob-text-secondary, #475459);
    --bf-gray-lt:    var(--ob-surface-subtle, #F0F2F4);
    --bf-border:     var(--ob-border-default, #C5CACF);
    --bf-white:      var(--ob-surface-card, #FFFFFF);
    --bf-accent:     var(--ob-action-primary, #355860);
    --bf-warn:       var(--ob-kupfer-500, #C8682E);
    --bf-radius:     var(--ob-radius-sm, 4px);
    --bf-shadow:     var(--ob-shadow-sm, 0 1px 2px rgba(26,31,33,.05));
    --bf-shadow-lg:  var(--ob-shadow-md, 0 4px 8px rgba(26,31,33,.08));
    --bf-font:       var(--ob-font-sans, inherit);
    --bf-font-serif: var(--ob-font-sans, inherit);
    /* §7.5 duration.fast 150 ms, easing.standard */
    --bf-trans:      .15s cubic-bezier(.4,0,.2,1);
}

#bf-finder-root * { box-sizing: border-box; }

#bf-finder-root {
    font-family: inherit;
    color: var(--bf-charcoal);
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* ── Header ──────────────────────────────────────────────────── */
.bf-header {
    text-align: center;
    padding: 48px 24px 40px;
}

.bf-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: var(--ob-weight-semibold, 600);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bf-green);
    margin-bottom: 16px;
}

.bf-header-eyebrow::before,
.bf-header-eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--bf-green);
}

.bf-header h2 {
    font-family: var(--bf-font-serif);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--bf-charcoal);
    margin: 0 0 12px;
}

.bf-header p {
    font-size: 16px;
    font-weight: var(--ob-weight-regular, 400);
    color: var(--bf-gray);
    line-height: 1.6;
    margin: 0;
}

/* ── Progress ────────────────────────────────────────────────── */
.bf-progress-wrap {
    margin-bottom: 36px;
}

.bf-progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
}

.bf-progress-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 2px;
    background: var(--bf-border);
    transform: translateY(-50%);
    z-index: 0;
}

.bf-step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bf-white);
    border: 2px solid var(--bf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--ob-weight-semibold, 600);
    color: var(--bf-gray);
    position: relative;
    z-index: 1;
    transition: all var(--bf-trans);
    cursor: default;
}

.bf-step-dot.done {
    background: var(--bf-green);
    border-color: var(--bf-green);
    color: var(--ob-text-inverse, #FFFFFF);
}

.bf-step-dot.active {
    background: var(--bf-charcoal);
    border-color: var(--bf-charcoal);
    color: var(--ob-text-inverse, #FFFFFF);
    box-shadow: 0 0 0 4px var(--ob-petrol-100, #D3DCDF);
}

.bf-progress-label {
    text-align: right;
    font-size: 12px;
    color: var(--bf-gray);
    margin-top: 6px;
}

/* ── Step Card ───────────────────────────────────────────────── */
.bf-step-card {
    background: var(--bf-white);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    box-shadow: var(--bf-shadow);
    padding: 36px 40px 32px;
    animation: bf-slide-in .3s ease;
}

@keyframes bf-slide-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bf-step-eyebrow {
    font-size: 12px;
    font-weight: var(--ob-weight-semibold, 600);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bf-green);
    margin-bottom: 8px;
}

.bf-step-question {
    font-family: var(--bf-font-serif);
    font-size: clamp(20px, 3.5vw, 26px);
    font-weight: 400;
    color: var(--bf-charcoal);
    margin: 0 0 8px;
    line-height: 1.25;
}

.bf-step-hint {
    font-size: 14px;
    color: var(--bf-gray);
    font-weight: var(--ob-weight-regular, 400);
    line-height: 1.5;
    margin-bottom: 28px;
}

/* ── Optionen ────────────────────────────────────────────────── */
.bf-options {
    display: grid;
    gap: 12px;
}

.bf-options.cols-2 { grid-template-columns: 1fr 1fr; }
.bf-options.cols-1 { grid-template-columns: 1fr; }

@media (max-width: 600px) {
    .bf-options.cols-2 { grid-template-columns: 1fr; }
    .bf-step-card { padding: 24px 20px; }
}

.bf-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--bf-border);
    border-radius: var(--ob-radius-sm, 4px);
    cursor: pointer;
    transition: all var(--bf-trans);
    user-select: none;
    background: var(--bf-white);
    position: relative;
    overflow: hidden;
}

.bf-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bf-green-lt);
    opacity: 0;
    transition: opacity var(--bf-trans);
}

.bf-option:hover {
    border-color: var(--bf-green-mid);
    transform: translateY(-1px);
    box-shadow: var(--ob-shadow-md, 0 4px 8px rgba(26,31,33,.08));
}

.bf-option:hover::before { opacity: 1; }

.bf-option.selected {
    border-color: var(--bf-green);
    background: var(--bf-green-lt);
}

.bf-option.selected::before { opacity: 1; }

.bf-option-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.bf-option-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.bf-option-label {
    font-size: 15px;
    font-weight: var(--ob-weight-semibold, 600);
    color: var(--bf-charcoal);
    margin-bottom: 2px;
}

.bf-option-desc {
    font-size: 13px;
    color: var(--bf-gray);
    font-weight: var(--ob-weight-regular, 400);
    line-height: 1.4;
}

.bf-option-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bf-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--bf-trans);
    position: relative;
    z-index: 1;
}

.bf-option.selected .bf-option-check {
    background: var(--bf-green);
    border-color: var(--bf-green);
    color: var(--ob-text-inverse, #FFFFFF);
}

.bf-option.selected .bf-option-check::after {
    content: '✓';
    font-size: 12px;
    font-weight: var(--ob-weight-bold, 700);
}

/* ── Raumhöhen-Info-Box ──────────────────────────────────────── */
.bf-info-box {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ob-radius-sm, 4px);
    background: var(--ob-state-warning-bg, rgba(200,104,46,.12));
    border-left: 4px solid var(--bf-warn);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--ob-state-warning-text, #85431D);
    line-height: 1.5;
}

.bf-info-box.green {
    background: var(--bf-green-lt);
    border-color: var(--bf-green);
    color: var(--ob-text-brand, #355860);
}

/* ── Navigation ──────────────────────────────────────────────── */
.bf-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    gap: 12px;
}

.bf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--ob-radius-sm, 4px);
    font-family: var(--bf-font);
    font-size: 15px;
    font-weight: var(--ob-weight-semibold, 600);
    cursor: pointer;
    border: none;
    transition: all var(--bf-trans);
}

.bf-btn-primary {
    background: var(--bf-green);
    color: var(--ob-text-inverse, #FFFFFF);
}

.bf-btn-primary:hover:not(:disabled) {
    background: var(--bf-green-mid);
    transform: translateY(-1px);
    box-shadow: var(--ob-shadow-md, 0 4px 8px rgba(26,31,33,.08));
}

.bf-btn-primary:disabled {
    background: var(--bf-border);
    color: var(--bf-gray);
    cursor: not-allowed;
}

.bf-btn-secondary {
    background: transparent;
    color: var(--bf-gray);
    border: 1px solid var(--bf-border);
}

.bf-btn-secondary:hover {
    background: var(--bf-gray-lt);
    color: var(--bf-charcoal);
}

/* ── Ergebnisse ──────────────────────────────────────────────── */
.bf-results-header {
    text-align: center;
    padding: 40px 24px 32px;
}

.bf-results-header h2 {
    font-family: var(--bf-font-serif);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 400;
    margin: 0 0 12px;
}

.bf-results-header p {
    color: var(--bf-gray);
    font-size: 15px;
    font-weight: var(--ob-weight-regular, 400);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto;
}

/* ── KI-Erklärung ────────────────────────────────────────────── */
.bf-ai-box {
    background: var(--ob-petrol-50, #EDF1F2);
    border: 1px solid var(--ob-petrol-200, #A9BBC0);
    border-radius: var(--bf-radius);
    padding: 24px 28px;
    margin-bottom: 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.bf-ai-icon {
    width: 40px; height: 40px;
    background: var(--bf-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: var(--ob-text-inverse, #FFFFFF);
}

.bf-ai-label {
    font-size: 12px;
    font-weight: var(--ob-weight-semibold, 600);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bf-green);
    margin-bottom: 6px;
}

.bf-ai-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--bf-charcoal);
    font-weight: var(--ob-weight-regular, 400);
}

.bf-ai-text.loading {
    color: var(--bf-gray);
    font-style: italic;
}

/* ── Produkt-Karten ──────────────────────────────────────────── */
.bf-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.bf-product-card {
    background: var(--bf-white);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    overflow: hidden;
    box-shadow: var(--bf-shadow);
    transition: all var(--bf-trans);
    display: flex;
    flex-direction: column;
    animation: bf-card-in .4s ease both;
}

.bf-product-card:nth-child(2) { animation-delay: .08s; }
.bf-product-card:nth-child(3) { animation-delay: .16s; }

@keyframes bf-card-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bf-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bf-shadow-lg);
    border-color: var(--bf-green-mid);
}

.bf-product-card.best-match {
    border-color: var(--bf-green);
    border-width: 2px;
}

.bf-card-badge {
    background: var(--bf-green);
    color: var(--ob-text-inverse, #FFFFFF);
    font-size: 12px;
    font-weight: var(--ob-weight-semibold, 600);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    text-align: center;
}

.bf-card-image-wrap {
    background: var(--ob-surface-subtle, #F0F2F4);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
}

.bf-card-image-wrap img {
    max-height: 140px;
    max-width: 100%;
    object-fit: contain;
}

.bf-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bf-card-name {
    font-size: 15px;
    font-weight: var(--ob-weight-semibold, 600);
    color: var(--bf-charcoal);
    margin-bottom: 6px;
    line-height: 1.3;
}

.bf-card-tagline {
    font-size: 13px;
    color: var(--bf-gray);
    font-weight: var(--ob-weight-regular, 400);
    line-height: 1.4;
    margin-bottom: 14px;
    flex: 1;
}

.bf-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.bf-card-spec {
    font-size: 12px;
    padding: 3px 9px;
    border-radius: var(--ob-radius-full, 9999px);
    background: var(--bf-gray-lt);
    color: var(--bf-gray);
    font-weight: var(--ob-weight-semibold, 600);
}

.bf-card-spec.highlight {
    background: var(--bf-green-lt);
    color: var(--bf-green);
}

.bf-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--bf-border);
    gap: 10px;
}

.bf-card-price {
    font-family: var(--bf-font-serif);
    font-size: 20px;
    color: var(--bf-charcoal);
}

.bf-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--bf-green);
    color: var(--ob-text-inverse, #FFFFFF);
    border-radius: var(--ob-radius-sm, 4px);
    font-size: 13px;
    font-weight: var(--ob-weight-semibold, 600);
    text-decoration: none;
    transition: all var(--bf-trans);
    white-space: nowrap;
}

.bf-card-cta:hover {
    background: var(--bf-green-mid);
    transform: translateY(-1px);
    color: var(--ob-text-inverse, #FFFFFF);
    text-decoration: none;
}

/* ── Kein Ergebnis ───────────────────────────────────────────── */
.bf-no-result {
    text-align: center;
    padding: 40px 24px;
    color: var(--bf-gray);
}

.bf-no-result-icon { font-size: 48px; margin-bottom: 16px; }
.bf-no-result h3 { color: var(--bf-charcoal); margin-bottom: 8px; }

/* ── Zubehör-Sektion ─────────────────────────────────────────── */
.bf-accessories-section {
    margin-top: 8px;
}

.bf-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--bf-font-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--bf-charcoal);
    margin-bottom: 20px;
}

.bf-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bf-border);
}

.bf-acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.bf-acc-card {
    background: var(--bf-gray-lt);
    border: 1px solid var(--bf-border);
    border-radius: var(--ob-radius-sm, 4px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all var(--bf-trans);
    animation: bf-card-in .4s ease both;
}

.bf-acc-card:hover {
    background: var(--bf-white);
    border-color: var(--bf-green-mid);
    box-shadow: var(--bf-shadow);
}

.bf-acc-card img {
    width: 60px; height: 60px;
    object-fit: contain;
}

.bf-acc-name {
    font-size: 14px;
    font-weight: var(--ob-weight-semibold, 600);
    color: var(--bf-charcoal);
    line-height: 1.3;
}

.bf-acc-desc {
    font-size: 12px;
    color: var(--bf-gray);
    line-height: 1.45;
    flex: 1;
}

.bf-acc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--bf-border);
}

.bf-acc-price {
    font-size: 15px;
    font-weight: var(--ob-weight-semibold, 600);
    color: var(--bf-charcoal);
}

.bf-acc-cta {
    font-size: 12px;
    padding: 7px 14px;
    background: var(--bf-charcoal);
    color: var(--ob-text-inverse, #FFFFFF);
    border-radius: var(--ob-radius-sm, 4px);
    text-decoration: none;
    transition: all var(--bf-trans);
}

.bf-acc-cta:hover {
    background: var(--bf-green);
    color: var(--ob-text-inverse, #FFFFFF);
    text-decoration: none;
}

/* ── Neustart ────────────────────────────────────────────────── */
.bf-restart-wrap {
    text-align: center;
    padding: 32px 0 8px;
}

.bf-restart-btn {
    background: none;
    border: 1px solid var(--bf-border);
    border-radius: var(--ob-radius-sm, 4px);
    padding: 10px 24px;
    font-family: var(--bf-font);
    font-size: 14px;
    color: var(--bf-gray);
    cursor: pointer;
    transition: all var(--bf-trans);
}

.bf-restart-btn:hover {
    border-color: var(--bf-green);
    color: var(--bf-green);
    background: var(--bf-green-lt);
}

/* ── Summary-Pills (Zusammenfassung) ─────────────────────────── */
.bf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}

.bf-summary-pill {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--ob-radius-full, 9999px);
    background: var(--bf-gray-lt);
    color: var(--bf-charcoal);
    border: 1px solid var(--bf-border);
}

.bf-summary-pill span {
    color: var(--bf-gray);
    margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   CI-Angleichung — 2026-09-10
   Was die Tokens allein nicht leisten: Breite, Ausrichtung,
   Ueberschriftengewicht und die Stellen, an denen das Plugin eine
   eigene Formensprache mitbrachte.
   ═══════════════════════════════════════════════════════════════ */

/* --- Breite ---------------------------------------------------------------
   Das Plugin brachte «max-width: 860px; margin: 0 auto» mit und stand damit
   schmaler und mittig in einer Seite, deren Inhalt 1200 px breit und
   linksbuendig ist. Die Breite kommt jetzt vom Abschnitt, nicht vom Plugin. */
#bf-finder-root {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--ob-text-primary, #1A1F21);
}

/* --- Kopf: linksbuendig mit Kupferlinie -----------------------------------
   Alle Abschnittstitel der Website stehen links und tragen eine kurze
   Kupferlinie. Der zentrierte Kopf des Plugins sah daneben aus wie ein
   eingebettetes Fremdelement. */
.bf-header,
.bf-results-header {
    text-align: left;
    padding: 0 0 32px;
}

.bf-header h2,
.bf-results-header h2,
.bf-step-question,
.bf-section-title {
    font-weight: var(--ob-weight-semibold, 600);
    letter-spacing: 0;
}

.bf-header h2,
.bf-results-header h2 {
    position: relative;
    padding-bottom: 14px;
}

.bf-header h2::after,
.bf-results-header h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--ob-kupfer-500, #C8682E);
}

.bf-results-header p {
    margin: 0;                 /* war «0 auto» fuer die Zentrierung */
    max-width: 780px;          /* Lesebreite der Website */
}

/* --- Eyebrows: Kupfer statt Gruen -----------------------------------------
   Kupfer ist die Akzentfarbe des CI. §5.3 begrenzt sie auf rund 5 % der
   Textflaeche — Kleinkapitaelchen-Label sind genau der vorgesehene Ort.
   kupfer.600 statt kupfer.500, weil #C8682E bei 12 px auf Weiss nur 3.84:1
   erreicht und damit unter AA liegt. */
.bf-header-eyebrow,
.bf-step-eyebrow,
.bf-ai-label {
    color: var(--ob-kupfer-600, #A85525);
    letter-spacing: 1.2px;
}

.bf-header-eyebrow::before,
.bf-header-eyebrow::after {
    background: var(--ob-kupfer-300, #E29765);
}

/* Der Kopf steht links — die Zierlinie davor faellt weg. */
.bf-header-eyebrow::before { display: none; }

/* --- Fortschritt ----------------------------------------------------------
   Der aktive Punkt war Tiefschwarz, die Leiste ein Farbverlauf. Beides kennt
   das CI nicht: Marke ist Petrol, Verlaeufe kommen nicht vor. Der aktive
   Punkt hebt sich jetzt durch den Ring ab, nicht durch eine zweite Farbe. */
.bf-step-dot.active {
    background: var(--ob-action-primary, #355860);
    border-color: var(--ob-action-primary, #355860);
}

/* --- Karten wie auf der uebrigen Seite ------------------------------------
   Unsere Karten tragen border.subtle, nicht border.default — der kraeftigere
   Rand gehoert an Eingabefelder. */
.bf-step-card,
.bf-product-card {
    border-color: var(--ob-border-subtle, #F0F2F4);
}

/* --- Zubehoerknopf --------------------------------------------------------
   Stand auf Tiefschwarz. Kaufknoepfe sind auf der ganzen Seite Petrol. */
.bf-acc-cta {
    background: var(--ob-action-primary, #355860);
}

.bf-acc-cta:hover {
    background: var(--ob-action-primary-hover, #2D4B53);
}

/* --- Sichtbarer Fokus -----------------------------------------------------
   Die Optionen sind mit der Maus bedienbar, hatten aber keine Tastaturspur.
   WCAG 2.4.7. */
.bf-option:focus-visible,
.bf-btn:focus-visible,
.bf-restart-btn:focus-visible,
.bf-card-cta:focus-visible,
.bf-acc-cta:focus-visible {
    outline: 3px solid var(--ob-border-focus, #355860);
    outline-offset: 2px;
}

/* --- Einspaltige Optionen nicht ueber die Lesebreite ----------------------
   In der 1200er Spalte waere eine einzelne Option sonst 1140 px breit. */
.bf-options.cols-1 {
    max-width: 780px;
}

/* Die Zusammenfassungs-Pillen standen mittig unter einer linksbuendigen
   Ueberschrift. */
.bf-summary {
    justify-content: flex-start;
}

/* --- Piktogramme ----------------------------------------------------------
   Die Emoji sind durch Phosphor-Light-Icons ersetzt (siehe finder.js).
   Emoji zeichnet das Betriebssystem: mehrfarbig, und auf Windows, Mac und
   Android jeweils anders. Die Icons hier tragen «fill: currentColor», die
   Farbe kommt also aus diesen Regeln — durchgehend Petrol wie die Knoepfe,
   nach §11.5 «Linienicons, konsequent Dark Green auf hellem Grund».
   Die Groesse steht ebenfalls hier, nicht in den Dateien. */

.bf-option-icon svg {
    display: block;
    width: 28px;
    height: 28px;
    color: var(--ob-action-primary, #355860);
}

/* Bei gewaehlter Option bleibt das Icon Petrol — der Kontrast zum
   petrol.50-Grund traegt (7.4:1). */

.bf-step-dot svg {
    width: 15px;
    height: 15px;
}

.bf-ai-icon svg {
    width: 20px;
    height: 20px;
    color: var(--ob-text-inverse, #FFFFFF);
}

.bf-no-result-icon {
    line-height: 1;
}

.bf-no-result-icon svg {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    color: var(--ob-text-tertiary, #76878F);
}

/* Icons, die mitten im Text stehen — Hinweiskasten, Telefonnummer,
   Fallback-Hinweis. Sie sitzen auf der Schriftlinie statt darueber. */
.bf-info-box svg,
.bf-ai-text svg,
.bf-results-header p svg,
.bf-no-result p svg {
    width: 17px;
    height: 17px;
    vertical-align: -3px;
    flex-shrink: 0;
}

.bf-info-box svg {
    color: var(--ob-kupfer-600, #A85525);
}

/* --- Fortschritt in der Punktreihe selbst ----------------------------------
   Frueher zeigten zwei Striche dasselbe: die graue Verbindungslinie zwischen
   den Punkten und darunter ein eigener Fortschrittsbalken. Der Balken ist
   weg — die Verbindungslinie faerbt sich jetzt selbst.

   «--bf-anteil» kommt aus dem JS und laeuft von 0 bis 1. Die Fuellung endet
   auf der MITTE des aktuellen Punktes, nicht bei einem Prozentwert der
   Gesamtbreite: der erste Punkt beginnt 16 px vom linken Rand (halbe
   Punktbreite), der letzte endet 16 px vor dem rechten. Die nutzbare Strecke
   zwischen den Mitten ist also «100 % - 32 px». */

.bf-progress-steps::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 2px;
    width: calc(16px + var(--bf-anteil, 0) * (100% - 32px));
    background: var(--ob-action-primary, #355860);
    transform: translateY(-50%);
    z-index: 0;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* Die Punkte liegen ueber der Linie. */
.bf-step-dot {
    z-index: 1;
}

/* Der Abstand nach unten kam vom entfallenen Balken. */
.bf-progress-steps {
    margin-bottom: 6px;
}

/* Leerer Zustand: die Ueberschrift steht schon im Kopf des Ergebnisses.
   Hier nur Erklaerung und die zwei Wege zum Kontakt — nebeneinander, und der
   Knopf mit der Telefonnummer darf nicht umbrechen. */
.bf-no-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.bf-no-result .bf-btn {
    white-space: nowrap;
    text-decoration: none;
}