/* KreativBüro · Buchstabe mit Namen. Baut auf site.css und schriftzug.css auf. */
.bn #name { width: 100%; font: inherit; font-size: 1.2rem; }
.bn #zeichen { width: 4.5rem; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }

/* Umschalter über der Vorschau: zusammengesetzt oder als Druckteile nebeneinander */
.bn-ansicht { display: inline-flex; margin: 0 0 .7rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px #c3ccd5; padding: 3px; gap: 3px; }
.bn-ansicht label { position: relative; cursor: pointer; }
.bn-ansicht input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bn-ansicht span { display: block; padding: .4rem .85rem; font-size: .88rem; font-weight: 600; color: var(--ink-muted); border-radius: calc(var(--radius) - 1px); }
.bn-ansicht input:checked + span { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--lime-on-paper); }
.bn-ansicht input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Kaufbereich unter den Werten */
.bn-kauf { margin-top: 1.3rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: 3px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-line); }
.bn-kauf .sz-knoepfe { margin-top: .9rem; }
.bn-kauf .fine { color: var(--ink-muted); margin-top: .8rem; font-size: .78rem; }
.bn-kauf .fine a { color: var(--ink); }
.bn-kauf .form-grid { margin-top: .9rem; }
.bn-kauf .check label { font-size: .9rem; }
.bn-preis { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.bn-preis strong { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bn-preis span { font-size: .88rem; color: var(--ink-muted); }
.bn-paypal { margin-top: 1rem; max-width: 26rem; }
.bn-frei { margin: 0; font-weight: 600; color: var(--ink); display: flex; gap: .55rem; align-items: baseline; }
.bn-frei::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px rgba(91, 112, 0, .25); flex: none; transform: translateY(.05rem); }
.bn .sz-ausgabe > .sz-knoepfe { margin-top: .9rem; }