/**
 * JB Achsenfinder - Styles
 * Akzentfarbe zentral ueber --jbaf-accent (Shop-CI-Rot), Warenkorb-Gruen --jbaf-cart.
 */

.jbaf,
.jbaf-embed,
.jbaf-modal {
    --jbaf-accent: #900000;
    --jbaf-accent-dark: #5d0000;
    --jbaf-accent-soft: #fbeeee;
    --jbaf-cart: #13ae58;
    --jbaf-cart-dark: #0e8041;
    --jbaf-ok: #2e8b57;
    --jbaf-warn: #b36b00;
    --jbaf-warn-bg: #fff6e0;
    --jbaf-danger: #b00020;
    --jbaf-border: #ddd;
    --jbaf-bg-soft: #f6f6f6;
    --jbaf-text-soft: #666;
    --jbaf-radius: 10px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.5;
    color: #222;
}
.jbaf *, .jbaf-embed *, .jbaf-modal * { box-sizing: border-box; }
.jbaf [hidden], .jbaf-embed [hidden], .jbaf-modal [hidden], .jbaf-modal[hidden], .jbaf-embed-body[hidden] { display: none !important; }

/* ---------- Teaser (Kategorie-Einbettung) ---------- */
.jbaf-embed { margin: 0 0 20px; }
.jbaf-teaser {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border: 2px solid var(--jbaf-accent); border-radius: var(--jbaf-radius);
    background: #fff; cursor: pointer; transition: box-shadow .15s ease, background .15s ease;
}
.jbaf-teaser:hover, .jbaf-teaser:focus-visible { box-shadow: 0 3px 14px rgba(0,0,0,.14); outline: none; }
.jbaf-teaser.is-open { background: var(--jbaf-accent-soft); border-radius: var(--jbaf-radius) var(--jbaf-radius) 0 0; }
.jbaf-teaser-icon { flex: 0 0 auto; width: 46px; color: var(--jbaf-accent); }
.jbaf-teaser-icon svg { display: block; width: 100%; height: auto; }
.jbaf-teaser-text { flex: 1 1 auto; display: flex; flex-direction: column; }
.jbaf-teaser-text small { color: var(--jbaf-text-soft); }
.jbaf-teaser-btn { flex: 0 0 auto; padding: 9px 16px; background: var(--jbaf-accent); color: #fff; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.jbaf-embed-body { border: 2px solid var(--jbaf-accent); border-top: 0; border-radius: 0 0 var(--jbaf-radius) var(--jbaf-radius); padding: 16px; background: #fff; }

/* ---------- Kopf ---------- */
.jbaf-head { margin-bottom: 18px; }
.jbaf-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.jbaf-title { margin: 0 0 8px; font-size: 1.45em; line-height: 1.25; }
.jbaf-intro { margin: 0 0 10px; color: #333; }
.jbaf-note { padding: 10px 14px; border-left: 4px solid var(--jbaf-accent); background: var(--jbaf-bg-soft); border-radius: 0 6px 6px 0; font-size: .95em; }

/* ---------- Fortschritt ---------- */
.jbaf-progress { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.jbaf-prog-item {
    display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--jbaf-border);
    border-radius: 999px; color: var(--jbaf-text-soft); font-size: .9em; background: #fff;
}
.jbaf-prog-item span {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--jbaf-border); color: #444; font-size: .85em; font-weight: 700;
}
.jbaf-prog-item.is-active { border-color: var(--jbaf-accent); color: #222; font-weight: 600; }
.jbaf-prog-item.is-active span { background: var(--jbaf-accent); color: #fff; }
.jbaf-prog-item.is-done span { background: var(--jbaf-ok); color: #fff; }

/* ---------- Trefferzaehler ---------- */
.jbaf-counter {
    display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 14px;
    border-radius: 8px; background: #eef7f1; color: #1d5c3a; font-size: .95em;
}
.jbaf-counter-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--jbaf-ok); flex: 0 0 auto; }
.jbaf-counter.is-few { background: #fff6e0; color: #6b4a00; }
.jbaf-counter.is-few .jbaf-counter-dot { background: var(--jbaf-warn); }
.jbaf-counter.is-zero { background: var(--jbaf-accent-soft); color: var(--jbaf-accent-dark); }
.jbaf-counter.is-zero .jbaf-counter-dot { background: var(--jbaf-accent); }

/* ---------- Panels ---------- */
.jbaf-panel { border: 1px solid var(--jbaf-border); border-radius: var(--jbaf-radius); padding: 18px; margin-bottom: 14px; background: #fff; }
.jbaf-panel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.2em; }
.jbaf-step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--jbaf-accent); color: #fff; font-size: .85em; font-weight: 700; flex: 0 0 auto;
}
.jbaf-help { margin: 0 0 14px; color: #444; }
.jbaf-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.jbaf-col-sketch { position: sticky; top: 90px; }

/* ---------- Auswahl-Karten ---------- */
.jbaf-choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.jbaf-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.jbaf-choice-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px;
    border: 2px solid var(--jbaf-border); border-radius: var(--jbaf-radius); background: #fff; cursor: pointer; transition: all .15s ease; height: 100%;
}
.jbaf-choice-card:hover { border-color: #aaa; }
.jbaf-choice input:checked + .jbaf-choice-card { border-color: var(--jbaf-accent); background: var(--jbaf-accent-soft); box-shadow: 0 0 0 3px rgba(144,0,0,.12); }
.jbaf-choice input:focus-visible + .jbaf-choice-card { outline: 3px solid rgba(144,0,0,.35); }
.jbaf-icon { width: 104px; color: var(--jbaf-accent); }
.jbaf-icon svg { width: 100%; height: auto; display: block; }
.jbaf-choice-card small { color: var(--jbaf-text-soft); }
.jbaf-choice-count { font-style: normal; font-size: .82em; color: var(--jbaf-text-soft); margin-top: 4px; }

/* ---------- Felder & Chips ---------- */
.jbaf-field { margin-bottom: 18px; }
.jbaf-field-label { display: block; font-weight: 600; margin-bottom: 6px; }
.jbaf-req { font-weight: 500; font-size: .8em; color: var(--jbaf-accent); margin-left: 4px; }
.jbaf-opt { font-weight: 500; font-size: .8em; color: var(--jbaf-text-soft); margin-left: 4px; }
.jbaf-input-unit { display: flex; align-items: center; max-width: 240px; }
.jbaf-input-unit input {
    flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 1.15em; border: 2px solid var(--jbaf-border); border-radius: 8px 0 0 8px; background: #fff;
}
.jbaf-input-unit input:focus { border-color: var(--jbaf-accent); outline: none; }
.jbaf-input-unit span { padding: 10px 12px; border: 2px solid var(--jbaf-border); border-left: 0; border-radius: 0 8px 8px 0; background: var(--jbaf-bg-soft); color: var(--jbaf-text-soft); font-weight: 600; }
.jbaf-input-unit input::-webkit-outer-spin-button, .jbaf-input-unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jbaf-input-unit input[type=number] { -moz-appearance: textfield; }
.jbaf-other-input { margin-top: 8px; }
.jbaf-field-hint { margin: 8px 0 0; font-size: .9em; color: var(--jbaf-text-soft); }
.jbaf-field-err { margin: 8px 0 0; padding: 8px 12px; font-size: .9em; color: var(--jbaf-danger); background: #fdecee; border-radius: 6px; }
.jbaf-field-note { margin: 8px 0 0; padding: 8px 12px; font-size: .9em; background: var(--jbaf-warn-bg); border-left: 4px solid var(--jbaf-warn); border-radius: 0 6px 6px 0; }
.jbaf-avail span { margin-right: 4px; }
.jbaf-mini { padding: 2px 8px; margin: 2px 2px 2px 0; border: 1px solid var(--jbaf-border); border-radius: 999px; background: #fff; font-size: .9em; cursor: pointer; color: #333; }
.jbaf-mini:hover { border-color: var(--jbaf-accent); color: var(--jbaf-accent); }

.jbaf-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.jbaf-chip { position: relative; }
.jbaf-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.jbaf-chip span {
    display: inline-block; padding: 9px 16px; border: 2px solid var(--jbaf-border); border-radius: 999px; background: #fff; cursor: pointer;
    font-weight: 600; transition: all .12s ease; user-select: none;
}
.jbaf-chip span:hover { border-color: #aaa; }
.jbaf-chip input:checked + span { border-color: var(--jbaf-accent); background: var(--jbaf-accent); color: #fff; }
.jbaf-chip input:focus-visible + span { outline: 3px solid rgba(144,0,0,.35); }
.jbaf-chip-other span, .jbaf-chip-unknown span { font-weight: 500; color: var(--jbaf-text-soft); border-style: dashed; }
.jbaf-chip-other input:checked + span, .jbaf-chip-unknown input:checked + span { color: #fff; border-style: solid; }

.jbaf-select, .jbaf .bootstrap-select > .dropdown-toggle { width: 100%; max-width: 560px; padding: 10px 12px; font-size: 1em; border: 2px solid var(--jbaf-border); border-radius: 8px; background: #fff; }
.jbaf .bootstrap-select > select { width: .5px !important; }
.jbaf-select:focus { border-color: var(--jbaf-accent); outline: none; }

/* ---------- Warnbox / Details ---------- */
.jbaf-warn { margin: 12px 0; padding: 12px 14px; border-left: 5px solid var(--jbaf-danger); background: #fdecee; border-radius: 0 8px 8px 0; font-size: .95em; }
.jbaf-warn a { color: var(--jbaf-accent-dark); font-weight: 600; }
.jbaf-details { margin-top: 10px; border: 1px solid var(--jbaf-border); border-radius: 8px; padding: 0; }
.jbaf-details summary { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--jbaf-accent); }
.jbaf-details-body { padding: 4px 14px 14px; font-size: .93em; }
.jbaf-details-body p { margin: 8px 0; }
.jbaf-where { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; margin: 8px 0; }
.jbaf-where-sketch svg { width: 100%; height: auto; }

/* ---------- Skizzen ---------- */
.jbaf-sketch { border: 1px solid var(--jbaf-border); border-radius: var(--jbaf-radius); padding: 12px; background: #fafafa; margin-bottom: 12px; }
.jbaf-sketch-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.jbaf-sketch-svg [hidden] { display: none; }
svg.jbaf-sketch-svg[hidden] { display: none; }
.jbaf-brake-where figure { margin: 0 0 12px; }
.jbaf-brake-where figure[hidden] { display: none; }
.jbaf-brake-where figcaption { font-size: 13px; line-height: 1.4; color: #444; margin-top: 6px; }
/* Linienzeichnung im Massblatt-Stil (weiss gefuellt, dunkle Kontur) */
.jbaf-tech .jbaf-ln-tube { fill: #eef0f2; stroke: #222; stroke-width: 2.2; }
.jbaf-tech .jbaf-ln-plate { fill: #fff; stroke: #222; stroke-width: 2; stroke-linejoin: round; }
.jbaf-tech .jbaf-ln-cast { fill: #d7dadd; stroke: #222; stroke-width: 2; stroke-linejoin: round; }
.jbaf-tech .jbaf-ln-hub { fill: #e2e4e6; stroke: #222; stroke-width: 2; }
.jbaf-tech .jbaf-ln-flange { fill: #fff; stroke: #222; stroke-width: 2.2; }
.jbaf-tech .jbaf-ln-bolt { fill: #fff; stroke: #222; stroke-width: 1.6; }
.jbaf-tech .jbaf-ln-slot { fill: #fff; stroke: #222; stroke-width: 1.6; }
.jbaf-tech .jbaf-ln-drum { fill: #fff; stroke: #222; stroke-width: 2.6; }
.jbaf-tech .jbaf-ln-thin { stroke: #555; stroke-width: 1.1; fill: none; }
.jbaf-lever-axis { stroke: #222; stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.jbaf-lever-ghost text { font-size: 13px; fill: #aab0b5; font-weight: 700; }
/* Fotos mit Markierungen */
.jbaf-photo-svg .jbaf-dim text.jbaf-dim-text, .jbaf-tech .jbaf-dim text.jbaf-dim-text { font-size: 30px; }
.jbaf-photo-svg .jbaf-dim .jbaf-dim-line, .jbaf-tech .jbaf-dim .jbaf-dim-line { stroke-width: 3; }
.jbaf-photo-svg .jbaf-dim.is-active .jbaf-dim-line { stroke-width: 4.5; }
.jbaf-photo-svg .jbaf-dim .jbaf-dim-ext { stroke-width: 2; }
.jbaf-ph-mark { fill: none; stroke: var(--jbaf-accent); stroke-width: 4; }
.jbaf-ph-link { fill: none; stroke: var(--jbaf-accent); stroke-width: 2.5; stroke-dasharray: 8 6; }
.jbaf-ph-frame { fill: none; stroke: var(--jbaf-accent); stroke-width: 4; }
.jbaf-ph-label { font-size: 26px; font-weight: 700; fill: #6b7278; }
.jbaf-ph-label.jbaf-ph-small { font-size: 18px; }
.jbaf-ph-label.is-key, .jbaf-ph-hl.is-active .jbaf-ph-label { fill: var(--jbaf-accent); }
.jbaf-ph-hl .jbaf-ph-mark, .jbaf-ph-hl .jbaf-ph-link { stroke: #9aa0a5; }
.jbaf-ph-hl.is-active .jbaf-ph-mark, .jbaf-ph-hl.is-active .jbaf-ph-link { stroke: var(--jbaf-accent); }
.jbaf-ph-callout circle { fill: var(--jbaf-accent); stroke: #fff; stroke-width: 2.5; }
.jbaf-ph-callout path { stroke: #fff; stroke-width: 6; fill: none; }
.jbaf-ph-callout path + text { }
.jbaf-ph-callout path { stroke: #444; stroke-width: 2.2; }
.jbaf-ph-callout text { font-size: 30px; font-weight: 700; fill: #333; }
/* Nabe von vorn (gezeichnet, Fotofarben) */
.jbaf-hf-drum { fill: #4b5056; stroke: #2a2d31; stroke-width: 2; }
.jbaf-hf-flange { fill: #a8a296; stroke: #6f6a61; stroke-width: 2; }
.jbaf-hf-cap-ring { fill: #b7b9ba; stroke: #7a7d80; stroke-width: 2; }
.jbaf-hf-cap { fill: #d3d5d6; stroke: #8c8f92; stroke-width: 1.5; }
.jbaf-hf-hole { fill: #141516; stroke: #6f6a61; stroke-width: 2; }
.jbaf-bolt-ring { fill: none; stroke: #fff; stroke-width: 3; opacity: .9; }
.jbaf-bolt.is-active .jbaf-bolt-ring { stroke: var(--jbaf-accent); }
.jbaf-bolt-lk rect { fill: #fff; stroke: #6b7278; stroke-width: 1.4; }
.jbaf-bolt-lk text { fill: #444; font-size: 15px; font-weight: 700; }
/* Strichzeichnung: Bauteile */
.jbaf-tech .jbaf-tb { fill: #e6e9ec; stroke: #2b2f33; stroke-width: 1.8; }
.jbaf-tech .jbaf-pl { fill: #fafbfb; stroke: #2b2f33; stroke-width: 1.6; stroke-linejoin: round; }
.jbaf-tech .jbaf-pl-open { fill: none; stroke: #2b2f33; stroke-width: 1.6; }
.jbaf-tech .jbaf-cast { fill: #cfd3d7; stroke: #2b2f33; stroke-width: 1.6; stroke-linejoin: round; }
.jbaf-tech .jbaf-drum { fill: #dcdfe2; stroke: #2b2f33; stroke-width: 1.6; }
.jbaf-tech .jbaf-rib { stroke: #8e959b; stroke-width: 1.2; fill: none; }
.jbaf-tech .jbaf-hole { fill: #fff; stroke: #2b2f33; stroke-width: 1.2; }
.jbaf-tech .jbaf-chrome { fill: #f3f4f5; stroke: #2b2f33; stroke-width: 1.2; }
.jbaf-tech .jbaf-rubber { fill: #5f6569; }
.jbaf-tech .jbaf-cable { fill: none; stroke: #b23b2b; stroke-width: 2.4; stroke-linecap: round; }
.jbaf-tech .jbaf-cl { fill: none; stroke: #333; stroke-width: 1; stroke-dasharray: 8 3 2 3; }
.jbaf-tech .jbaf-plate-dark { fill: #b9bec3; stroke: #2b2f33; stroke-width: 1.6; }
.jbaf-tech .jbaf-bowden-o { fill: none; stroke: #2b2f33; stroke-width: 8; stroke-linecap: round; }
.jbaf-tech .jbaf-bowden-i { fill: none; stroke: #9aa0a5; stroke-width: 4; stroke-linecap: round; }
.jbaf-svg-ref { stroke: #9a9fa4; stroke-width: 1.2; stroke-dasharray: 6 4; }
.jbaf-svg-small { font-size: 12px; fill: #777; }
.jbaf-svg-front path { fill: none; stroke: #8a9197; stroke-width: 2; color: #8a9197; }
.jbaf-svg-front text { font-size: 12px; fill: #8a9197; font-weight: 600; }
.jbaf-svg-callout { color: #6b7278; }
.jbaf-svg-callout path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.jbaf-svg-callout text { font-size: 12px; fill: currentColor; font-weight: 600; }
.jbaf-svg-callout.is-active { color: var(--jbaf-accent); }
.jbaf-svg-callout.is-active text { font-size: 13px; font-weight: 700; }
/* Typenschild */
.jbaf-plate > rect, .jbaf-plate > circle { fill: #f3f4f5; stroke: #2b2f33; stroke-width: 1.8; }
.jbaf-plate > path { stroke: #2b2f33; stroke-width: 1.4; }
.jbaf-plate-h { font-size: 10.5px; font-weight: 700; fill: #222; letter-spacing: .4px; }
.jbaf-plate-xs { font-size: 7.5px; fill: #444; }
.jbaf-plate-t { font-size: 13px; font-weight: 700; fill: #111; }
.jbaf-plate-s { font-size: 9px; fill: #555; }
.jbaf-plate-field rect { fill: #fff; stroke: #2b2f33; stroke-width: 1.1; }
.jbaf-plate-field text { font-size: 10px; font-weight: 700; fill: #111; font-family: "Courier New", monospace; }
.jbaf-plate-field.is-active rect { fill: var(--jbaf-accent); stroke: var(--jbaf-accent); }
.jbaf-plate-field.is-active text { fill: #fff; }
/* Ankerblech: Aufkleber + Lupe */
.jbaf-sticker rect { fill: #f7f8f9; stroke: var(--jbaf-accent); stroke-width: 1.6; }
.jbaf-sticker path { stroke: #555; stroke-width: 1.2; }
.jbaf-sticker-link { fill: none; stroke: var(--jbaf-accent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.jbaf-sticker-zoom rect { fill: #fff; stroke: var(--jbaf-accent); stroke-width: 1.6; }
/* Lochkreis */
.jbaf-bolt-circle { fill: none; stroke: #fff; stroke-width: 2.4; stroke-dasharray: 7 5; }
.jbaf-bolt-dim { color: #fff; }
.jbaf-bolt-dim line { stroke: currentColor; stroke-width: 2.4; }
.jbaf-bolt-dim rect { fill: #fff; stroke: currentColor; stroke-width: 1.2; }
.jbaf-bolt-dim text { fill: currentColor; font-size: 12px; font-weight: 700; }
.jbaf-bolt-label rect { fill: #fff; stroke: #6b7278; stroke-width: 1.4; }
.jbaf-bolt-label text { fill: #333; font-size: 19px; font-weight: 700; }
.jbaf-bolt.is-active .jbaf-bolt-circle, .jbaf-bolt.is-active .jbaf-bolt-dim { color: var(--jbaf-accent); stroke: var(--jbaf-accent); }
.jbaf-bolt.is-active .jbaf-bolt-dim line { stroke: var(--jbaf-accent); stroke-width: 2.2; }
.jbaf-bolt.is-active .jbaf-bolt-label rect { fill: var(--jbaf-accent); stroke: var(--jbaf-accent); }
.jbaf-bolt.is-active .jbaf-bolt-label text { fill: #fff; }

.jbaf-dim { color: #8a8a8a; transition: color .15s ease; }
.jbaf-dim .jbaf-dim-ext { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 4 3; }
.jbaf-dim .jbaf-dim-line { stroke: currentColor; stroke-width: 2; }
.jbaf-dim .jbaf-dim-bg { fill: #fff; stroke: currentColor; stroke-width: 1.5; }
.jbaf-dim text { fill: currentColor; font-size: 20px; font-weight: 800; }
.jbaf-dim text.jbaf-dim-text { font-size: 21px; font-weight: 700; }
.jbaf-dim.is-active { color: var(--jbaf-accent); }
.jbaf-dim.is-active .jbaf-dim-line { stroke-width: 3; }
.jbaf-dim.is-active .jbaf-dim-bg { fill: var(--jbaf-accent); }
.jbaf-dim.is-active .jbaf-dim-bg + text { fill: #fff; }

/* Schwinghebel: blasse Hilfsstellung vs. aktive Stellung mit Hebel und Trommel */
.jbaf-lever .jbaf-lever-full { display: none; }
.jbaf-lever.is-active .jbaf-lever-full { display: inline; }
.jbaf-lever.is-active .jbaf-lever-ghost { display: none; }
.jbaf-lever-ghost line { stroke: #c9ced2; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 8; }
.jbaf-lever-ghost circle { fill: #fff; stroke: #c9ced2; stroke-width: 2; }
.jbaf-lever-full { color: var(--jbaf-accent); }
.jbaf-lever-full .jbaf-lever-wheel { fill: none; stroke: #a6acb1; stroke-width: 1.5; stroke-dasharray: 5 4; }
.jbaf-lever-full .jbaf-lever-arc { fill: none; stroke: currentColor; stroke-width: 1.8; }
.jbaf-lever-label rect { fill: var(--jbaf-accent); }
.jbaf-lever-label text { fill: #fff; font-size: 15px; font-weight: 700; }

/* ---------- Navigation ---------- */
.jbaf-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.jbaf-nav .jbaf-btn-primary, .jbaf-nav .jbaf-btn-cart { margin-left: auto; min-width: 180px; }

/* ---------- Buttons ---------- */
.jbaf-btn {
    display: inline-block; padding: 10px 18px; border: 2px solid var(--jbaf-border); border-radius: 8px; background: #fff; color: #222;
    font-weight: 600; font-size: 1em; cursor: pointer; text-decoration: none; text-align: center; transition: all .12s ease; line-height: 1.3;
}
.jbaf-btn:hover { border-color: #999; text-decoration: none; color: #000; }
.jbaf-btn:disabled { opacity: .45; cursor: not-allowed; }
.jbaf-btn-small { padding: 6px 12px; font-size: .88em; font-weight: 500; }
.jbaf-btn-lg { padding: 13px 22px; font-size: 1.08em; }
.jbaf-btn-primary { background: var(--jbaf-accent); border-color: var(--jbaf-accent); color: #fff; }
.jbaf-btn-primary:hover { background: var(--jbaf-accent-dark); border-color: var(--jbaf-accent-dark); color: #fff; }
.jbaf-btn-cart { background: var(--jbaf-cart); border-color: var(--jbaf-cart); color: #fff; }
.jbaf-btn-cart:hover { background: var(--jbaf-cart-dark); border-color: var(--jbaf-cart-dark); color: #fff; }
.jbaf-btn-cart.is-added { background: var(--jbaf-ok); border-color: var(--jbaf-ok); }
.jbaf-btn-link { border-color: transparent; color: var(--jbaf-text-soft); font-weight: 500; }
.jbaf-btn-block { display: block; width: 100%; }

/* ---------- Ergebnis ---------- */
.jbaf-sum-title { font-weight: 600; margin-bottom: 6px; }
.jbaf-sum-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jbaf-sum-item {
    display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--jbaf-border); border-radius: 8px;
    background: var(--jbaf-bg-soft); cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; min-width: 110px;
}
.jbaf-sum-item small { color: var(--jbaf-text-soft); font-size: .8em; }
.jbaf-sum-item strong { font-size: 1em; }
.jbaf-sum-edit { font-size: .75em; color: var(--jbaf-accent); margin-top: 2px; }
.jbaf-sum-item:hover { border-color: var(--jbaf-accent); }
.jbaf-loading { padding: 14px 0; color: var(--jbaf-text-soft); display: flex; align-items: center; gap: 10px; }
.jbaf-spinner { width: 18px; height: 18px; border: 3px solid var(--jbaf-border); border-top-color: var(--jbaf-accent); border-radius: 50%; animation: jbaf-spin .8s linear infinite; }
@keyframes jbaf-spin { to { transform: rotate(360deg); } }
.jbaf-result-head { font-weight: 700; font-size: 1.05em; margin: 4px 0 10px; }
.jbaf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 8px; }
.jbaf-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--jbaf-border); border-radius: var(--jbaf-radius); background: #fff; overflow: hidden; }
.jbaf-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; background: var(--jbaf-accent); color: #fff; border-radius: 999px; font-size: .78em; font-weight: 700; }
.jbaf-badge-alt { top: auto; left: auto; right: 10px; top: 10px; background: #555; }
.jbaf-card-img { display: block; background: #fff; text-align: center; }
.jbaf-card-img img { max-width: 100%; width: 100%; height: 200px; object-fit: contain; padding: 10px; }
.jbaf-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 14px 14px; gap: 8px; }
.jbaf-card-title { font-weight: 700; color: #222; text-decoration: none; line-height: 1.3; }
.jbaf-card-title:hover { color: var(--jbaf-accent); }
.jbaf-card-specs { list-style: none; margin: 0; padding: 0; font-size: .9em; }
.jbaf-card-specs li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #eee; }
.jbaf-card-specs li span { color: var(--jbaf-text-soft); }
.jbaf-card-specs li strong { text-align: right; }
.jbaf-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .86em; }
.jbaf-badges li { display: flex; gap: 6px; padding: 5px 8px; border-radius: 6px; line-height: 1.35; }
.jbaf-badges li > span { flex: 0 0 auto; font-weight: 700; }
.jbaf-badge-ok { background: #eef7f1; color: #1d5c3a; }
.jbaf-badge-warn { background: var(--jbaf-warn-bg); color: #6b4a00; }
.jbaf-badge-danger { background: #fdecee; color: var(--jbaf-danger); font-weight: 600; }
.jbaf-badge-info { background: #eef3f8; color: #2b4a6b; }
.jbaf-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.jbaf-price { font-size: 1.25em; font-weight: 700; }
.jbaf-stock { font-size: .85em; font-weight: 600; }
.jbaf-stock.is-in { color: var(--jbaf-ok); }
.jbaf-stock.is-out { color: #a15c00; }
.jbaf-stock-line { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .9em; }
.jbaf-shipping-status { margin: 0; font-size: .86em; color: var(--jbaf-text-soft); }
.jbaf-tax-shipping { margin: -4px 0 0; font-size: .8em; color: var(--jbaf-text-soft); }
.jbaf-tax-shipping a { color: inherit; text-decoration: underline; }
.jbaf-price-html .price, .jbaf-price-html .products_price { font-size: 1.25em; font-weight: 700; }
.jbaf-card-actions { display: flex; flex-direction: column; gap: 8px; }
.jbaf-card-actions > .jbaf-btn { padding: 9px 12px; font-size: .95em; }
.jbaf-cart-form { display: flex; gap: 6px; margin: 0; }
.jbaf-qty { width: 62px; padding: 6px 4px 6px 10px; border: 2px solid var(--jbaf-border); border-radius: 8px; font-size: 1em; }
.jbaf-cart-form .jbaf-btn { flex: 1 1 auto; font-size: .95em; padding: 9px 10px; }
.jbaf-soldout { margin: 0; text-align: center; color: #a15c00; font-weight: 600; }

.jbaf-relax { margin: 10px 0; padding: 12px 14px; background: var(--jbaf-warn-bg); border-left: 5px solid var(--jbaf-warn); border-radius: 0 8px 8px 0; }
.jbaf-relax p { margin: 0 0 8px; }
.jbaf-noresult-inner { padding: 18px; border: 2px dashed var(--jbaf-accent); border-radius: var(--jbaf-radius); background: var(--jbaf-accent-soft); }
.jbaf-noresult-inner h4 { margin: 0 0 6px; font-size: 1.15em; }
.jbaf-copybox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 10px 12px; background: #fff; border-radius: 8px; border: 1px solid var(--jbaf-border); }
.jbaf-copybox small { flex: 1 0 100%; color: var(--jbaf-text-soft); }
.jbaf-copybox code { flex: 1 1 auto; font-size: .95em; background: transparent; color: #222; }
.jbaf-sheets { margin: 12px 0 0; font-size: .92em; }
.jbaf-sheets a { color: var(--jbaf-accent-dark); font-weight: 600; }
.jbaf-contact { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jbaf-also-custom { margin: 14px 0 0; text-align: center; color: var(--jbaf-text-soft); }
.jbaf-also-custom a { color: var(--jbaf-accent); font-weight: 600; }

/* ---------- Modal (Mess-Bestaetigung) ---------- */
.jbaf-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.jbaf-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.jbaf-modal-box { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.jbaf-modal-x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 1.8em; line-height: 1; color: #888; cursor: pointer; }
.jbaf-modal-title { margin: 0 30px 8px 0; font-size: 1.3em; }
.jbaf-modal-text { margin: 0 0 10px; }
.jbaf-modal-sketch { border: 1px solid var(--jbaf-border); border-radius: 8px; background: #fafafa; padding: 8px; }
.jbaf-modal-legend { list-style: none; margin: 10px 0; padding: 0; font-size: .9em; display: flex; flex-direction: column; gap: 4px; }
.jbaf-legend-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--jbaf-accent); color: #fff; font-weight: 800; font-size: .85em; margin-right: 6px; }
.jbaf-modal-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin: 10px 0 14px; border: 2px solid var(--jbaf-accent); border-radius: 8px; background: var(--jbaf-accent-soft); font-weight: 600; cursor: pointer; }
.jbaf-modal-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--jbaf-accent); }
.jbaf-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jbaf-modal-actions .jbaf-btn-cart { flex: 1 1 auto; }
body.jbaf-modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .jbaf-cols { grid-template-columns: 1fr; }
    .jbaf-col-sketch { position: static; order: -1; }
    .jbaf-where { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .jbaf { font-size: 14px; }
    .jbaf-panel { padding: 14px; }
    .jbaf-embed-body { padding: 10px; }
    .jbaf-teaser { flex-wrap: wrap; }
    .jbaf-teaser-btn { flex: 1 1 100%; text-align: center; }
    .jbaf-nav { flex-wrap: wrap; }
    .jbaf-nav .jbaf-btn { flex: 1 1 auto; }
    .jbaf-chip span { padding: 8px 12px; }
    .jbaf-modal-box { padding: 16px; }
}

/* 1.0.6 */
.jbaf .bootstrap-select:not(.input-group-btn) { width: 100% !important; max-width: 560px; }
#jbaf-brake { min-width: min(100%, 420px); }
.jbaf-card-hint { font-size: .82em; color: #777; margin: 4px 0 8px; text-align: center; }
.jbaf-card-custom { border: 2px dashed var(--jbaf-accent); background: #fdf6f6; display: flex; align-items: center; }
.jbaf-card-custom .jbaf-card-title { font-weight: 700; font-size: 1.1em; margin: 10px 0 6px; }
.jbaf-disclaimer { font-size: .85em; color: #666; background: #f7f7f7; border-left: 3px solid #bbb; padding: 8px 12px; margin: 14px 0 0; line-height: 1.5; }
.jbaf-rplate-bg { fill: #d81e2a; stroke: #a8121c; stroke-width: 1.5; }
.jbaf-rplate-h { font-size: 12px; font-weight: 800; fill: #f1f1f1; letter-spacing: .3px; }
.jbaf-rplate-s { font-size: 9px; font-weight: 600; fill: #f1f1f1; }
text.jbaf-rplate-s[text-anchor="end"] { font-size: 7.5px; }
.jbaf-rplate-field rect, .jbaf-rplate-f0 { fill: #d9dadb; stroke: #b9babb; stroke-width: 1; }
.jbaf-rplate-v { font-size: 15px; font-weight: 700; fill: #c8141f; }
.jbaf-rplate-e { font-size: 11px; font-weight: 700; fill: #a9abad; font-family: "Courier New", monospace; }
.jbaf-rplate-field.is-active rect { stroke: #111; stroke-width: 2.5; }
.jbaf-rplate-rivet { fill: #d6d8da; stroke: #8f9295; stroke-width: 1.2; }
.jbaf-dim-photo .jbaf-dim-ext { stroke-width: 2.2; }
.jbaf-dim-photo .jbaf-dim-line { stroke-width: 3; }
.jbaf-dim-photo text { font-size: 30px; }
#jbaf-tandem-warn { margin-top: 10px; }
#jbaf-result-tandem { margin-bottom: 12px; }