/* ============================================================
   BSD CM-Zoll-Rechner v3.0
   Corporate Design bogensportdiscount.ch
   Fonts: DM Sans (Titel) + Roboto Condensed (Body)
   Palette: #000000 | #a3a3a3 | #ffffff
   ============================================================ */

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

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

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

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

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

/* Field */
.bsd-cmz-field { display: flex; flex-direction: column; gap: 0.45rem; }
.bsd-cmz-label {
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-size: 11px; font-weight: 600; color: #a3a3a3;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.bsd-cmz-input-wrap {
    display: flex; align-items: stretch;
    border: 1px solid #a3a3a3; transition: border-color 0.2s ease;
}
.bsd-cmz-input-wrap:focus-within { border-color: #000000; }

.bsd-cmz-input {
    flex: 1; background: #ffffff; color: #000000;
    border: none; outline: none;
    padding: 0.75rem 1rem;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-size: 22px; font-weight: 300; line-height: 1;
    -moz-appearance: textfield;
}
.bsd-cmz-input::-webkit-outer-spin-button,
.bsd-cmz-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bsd-cmz-input::placeholder { color: #a3a3a3; opacity: 1; }

.bsd-cmz-unit {
    display: flex; align-items: center; justify-content: center;
    padding: 0 1rem;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #a3a3a3; border-left: 1px solid #a3a3a3; min-width: 3rem;
    background: #ffffff; transition: color 0.2s ease, border-color 0.2s ease;
}
.bsd-cmz-input-wrap:focus-within .bsd-cmz-unit {
    color: #000000; border-left-color: #000000;
}

/* Result */
.bsd-cmz-result-block {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid #a3a3a3;
    min-height: 3.2rem; background: #ffffff;
    transition: border-color 0.2s ease;
}
.bsd-cmz-result-block.bsd-cmz-active { border-color: #000000; }

.bsd-cmz-result-value {
    font-family: 'DM Sans', Helvetica, Arial, sans-serif;
    font-size: 32px; font-weight: 800; color: #000000;
    letter-spacing: -0.01em; line-height: 1;
    font-variant-numeric: tabular-nums; transition: opacity 0.12s ease;
}
.bsd-cmz-result-value[data-empty="true"] {
    color: #a3a3a3; font-weight: 300;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 22px;
}
.bsd-cmz-result-value.bsd-cmz-flash { opacity: 0.2; }

.bsd-cmz-result-unit {
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: #a3a3a3; line-height: 1; align-self: center;
}

/* Divider */
.bsd-cmz-divider {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.1rem 0;
}
.bsd-cmz-divider::before,
.bsd-cmz-divider::after { content: ''; flex: 1; height: 1px; background: #a3a3a3; }
.bsd-cmz-divider-label {
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: #a3a3a3; white-space: nowrap; flex-shrink: 0;
}

/* Footer */
.bsd-cmz-footer {
    padding: 0.75rem 1.4rem; border-top: 1px solid #a3a3a3;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-size: 11px; font-weight: 400; color: #a3a3a3;
    letter-spacing: 0.04em; text-transform: uppercase;
}

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

/* Responsive */
@media (max-width: 480px) {
    .bsd-cmz-wrap   { margin: 1rem auto; }
    .bsd-cmz-header { padding: 0.9rem 1.1rem 0.85rem; }
    .bsd-cmz-body   { padding: 1.1rem 1.1rem 1rem; }
    .bsd-cmz-footer { padding: 0.65rem 1.1rem; }
    .bsd-cmz-result-value { font-size: 26px; }
    .bsd-cmz-input  { font-size: 18px; }
}