/* ============================================================
   BSD Spinewert-Rechner v1.1
   Corporate Design bogensportdiscount.ch
   DM Sans + Roboto Condensed | #000 | #a3a3a3 | #fff
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;800&family=Roboto+Condensed:wght@300;400;600&display=swap');

.bsd-spine-wrap *,
.bsd-spine-wrap *::before,
.bsd-spine-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Wrapper ────────────────────────────────────────────────── */
.bsd-spine-wrap {
    max-width: 540px; width: 100%; margin: 2rem auto;
    background: #fff; border: 1px solid #000;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    animation: bsd-spine-in 0.35s ease both;
}
@keyframes bsd-spine-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Header ─────────────────────────────────────────────────── */
.bsd-spine-header {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.1rem 1.4rem 1rem; border-bottom: 1px solid #000;
}
.bsd-spine-icon { flex-shrink:0; color:#000; display:flex; align-items:center; }
.bsd-spine-icon svg { width:44px; height:12px; }
.bsd-spine-title {
    font-family: 'DM Sans', Helvetica, sans-serif;
    font-size: 13px; font-weight: 800; color: #000;
    letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}

/* ── Notice ─────────────────────────────────────────────────── */
.bsd-spine-notice {
    padding: .65rem 1.4rem; border-bottom: 1px solid #a3a3a3;
    font-size: 11px; color: #a3a3a3; letter-spacing: .02em; line-height: 1.55;
}
.bsd-spine-notice strong { color: #000; font-weight: 600; }

/* ── Body ───────────────────────────────────────────────────── */
.bsd-spine-body { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }

/* ── Divider ────────────────────────────────────────────────── */
.bsd-spine-divider { display:flex; align-items:center; gap:.75rem; margin:.2rem 0; }
.bsd-spine-divider::before, .bsd-spine-divider::after { content:''; flex:1; height:1px; background:#a3a3a3; }
.bsd-spine-divider span { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#a3a3a3; white-space:nowrap; }

/* ── Labels ─────────────────────────────────────────────────── */
.bsd-spine-label {
    display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
    font-size: 11px; font-weight: 600; color: #a3a3a3;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem;
}
.bsd-spine-label-unit { font-size: 10px; font-weight: 400; color: #a3a3a3; text-transform: none; letter-spacing: 0; opacity: .8; }
.bsd-spine-label-hint { font-size: 11px; color: #a3a3a3; margin-top: -.2rem; margin-bottom: .35rem; letter-spacing: .01em; font-style: italic; }

/* ── Number Inputs ──────────────────────────────────────────── */
.bsd-spine-input-wrap { display:flex; align-items:stretch; border:1px solid #a3a3a3; transition:border-color .2s; }
.bsd-spine-input-wrap:focus-within { border-color: #000; }
.bsd-spine-input {
    flex:1; background:#fff; color:#000; border:none; outline:none;
    padding: .7rem 1rem;
    font-family: 'Roboto Condensed', Helvetica, sans-serif;
    font-size: 20px; font-weight: 300; line-height:1;
    -moz-appearance: textfield;
}
.bsd-spine-input::-webkit-outer-spin-button,
.bsd-spine-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bsd-spine-input::placeholder { color:#a3a3a3; opacity:1; }
.bsd-spine-unit {
    display:flex; align-items:center; justify-content:center;
    padding:0 .9rem; font-size:11px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:#a3a3a3; border-left:1px solid #a3a3a3;
    min-width:3rem; background:#fff;
    transition: color .2s, border-color .2s;
}
.bsd-spine-input-wrap:focus-within .bsd-spine-unit { color:#000; border-left-color:#000; }

/* ── Radio Groups ───────────────────────────────────────────── */
.bsd-spine-radio-group { display:flex; flex-direction:column; border:1px solid #a3a3a3; }
.bsd-spine-radio-label {
    display:flex; align-items:center; gap:.7rem;
    padding:.62rem 1rem; cursor:pointer;
    font-size:13px; font-weight:400; color:#000;
    border-bottom:1px solid #a3a3a3;
    transition:background .15s; position:relative; user-select:none;
}
.bsd-spine-radio-label:last-child { border-bottom:none; }
.bsd-spine-radio-label:hover { background:#f7f7f7; }

.bsd-spine-radio { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

.bsd-spine-radio-dot {
    flex-shrink:0; width:14px; height:14px;
    border:1.5px solid #a3a3a3; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s; position:relative;
}
.bsd-spine-radio-dot::after {
    content:''; width:6px; height:6px; border-radius:50%;
    background:#000; opacity:0; transition:opacity .15s; position:absolute;
}
.bsd-spine-radio:checked ~ .bsd-spine-radio-dot { border-color:#000; }
.bsd-spine-radio:checked ~ .bsd-spine-radio-dot::after { opacity:1; }
.bsd-spine-radio-label:has(.bsd-spine-radio:checked) {
    background:#f7f7f7; font-weight:600;
    border-left:2px solid #000; padding-left:calc(1rem - 1px);
}

/* Badge für Compound */
.bsd-spine-badge {
    margin-left:auto; font-size:9px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:#a3a3a3; border:1px solid #a3a3a3;
    padding:1px 6px; white-space:nowrap;
}
.bsd-spine-radio-label:has(.bsd-spine-radio:checked) .bsd-spine-badge {
    color:#000; border-color:#000;
}

/* ── Ergebnis ───────────────────────────────────────────────── */
.bsd-spine-result-wrap {
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid #000;
    opacity:.4; transition:opacity .3s;
}
.bsd-spine-result-wrap.bsd-spine-result-visible { opacity:1; }
.bsd-spine-result-card { display:flex; flex-direction:column; gap:.3rem; padding:1.2rem 1.4rem; }
.bsd-spine-result-card + .bsd-spine-result-card { border-left:1px solid #a3a3a3; }

.bsd-spine-result-label { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#a3a3a3; }
.bsd-spine-result-value {
    font-family:'DM Sans', Helvetica, sans-serif;
    font-size:36px; font-weight:800; color:#000;
    line-height:1; letter-spacing:-.01em;
    font-variant-numeric:tabular-nums; transition:opacity .12s;
}
.bsd-spine-result-value[data-empty="true"] {
    color:#a3a3a3; font-weight:300;
    font-family:'Roboto Condensed', Helvetica, sans-serif; font-size:28px;
}
.bsd-spine-flash { opacity:.15; }
.bsd-spine-result-note { font-size:10px; font-weight:400; color:#a3a3a3; letter-spacing:.03em; line-height:1.3; }

/* ── Footer ─────────────────────────────────────────────────── */
.bsd-spine-footer {
    padding:.8rem 1.4rem; border-top:1px solid #a3a3a3;
    font-size:11px; color:#a3a3a3; letter-spacing:.02em; line-height:1.55;
}
.bsd-spine-footer strong { color:#000; font-weight:600; }

/* ── DIVI 5 ─────────────────────────────────────────────────── */
.et_pb_section .bsd-spine-wrap, .et_pb_row .bsd-spine-wrap, .et_pb_column .bsd-spine-wrap {
    max-width: 540px; font-family:'Roboto Condensed', Helvetica, sans-serif;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:540px) {
    .bsd-spine-wrap { margin:1rem auto; }
    .bsd-spine-header, .bsd-spine-body, .bsd-spine-footer, .bsd-spine-notice { padding-left:1rem; padding-right:1rem; }
    .bsd-spine-result-card { padding:1rem; }
    .bsd-spine-result-value { font-size:28px; }
    .bsd-spine-result-value[data-empty="true"] { font-size:22px; }
    .bsd-spine-input { font-size:17px; }
    .bsd-spine-badge { display:none; }
}
@media (max-width:360px) {
    .bsd-spine-result-wrap { grid-template-columns:1fr; }
    .bsd-spine-result-card + .bsd-spine-result-card { border-left:none; border-top:1px solid #a3a3a3; }
}

/* ── Compound-Hinweis ───────────────────────────────────────── */
.bsd-spine-compound-hint {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .7rem 1rem;
    border: 1px solid #a3a3a3;
    border-left: 3px solid #000;
    font-size: 11px;
    color: #a3a3a3;
    letter-spacing: .02em;
    line-height: 1.55;
    background: #f7f7f7;
}
.bsd-spine-compound-hint strong { color: #000; font-weight: 600; }
.bsd-spine-compound-hint-icon { flex-shrink: 0; font-size: 13px; color: #000; line-height: 1.4; }

/* ── Compound-Note im Ergebnis ──────────────────────────────── */
.bsd-spine-compound-note {
    font-size: 10px;
    color: #a3a3a3;
    letter-spacing: .04em;
    margin-top: .2rem;
}

/* ── Gedimmte Holzspine-Karte bei Compound ──────────────────── */
.bsd-spine-result-card.bsd-spine-dimmed { opacity: 0.35; }
.bsd-spine-result-card.bsd-spine-dimmed .bsd-spine-result-value {
    font-family: 'Roboto Condensed', Helvetica, sans-serif;
    font-size: 22px; font-weight: 400; color: #a3a3a3;
}