/* Buchstaben-Generator /buchstabe (Michael, 12.11.2026, Demo) – Ergänzungen zu css/schild.css */
.bs-eingabe { grid-template-columns: 110px minmax(0, 1fr); margin-bottom: 8px; }
.bs #bs-buchstabe { text-align: center; font-size: 26px; font-weight: 700; text-transform: uppercase; }
.bs #bs-svg[hidden] { display: none; }
.bs #bs-svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.bs-michael { display: grid; gap: 10px; margin: 6px 0 18px; padding: 14px; border-radius: 14px; background: #eef3fb; border: 1px dashed #6d8fc7; font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
  .bs-eingabe { grid-template-columns: 80px minmax(0, 1fr); }
  .bs #bs-svg { max-height: 34vh; }

}
.bs-info { margin: 10px 4px 0; font-size: 14px; line-height: 1.5; color: var(--neu-grau, #6b5a50); }
.bs-info[hidden] { display: none; }
@media (max-width: 960px) {
  /* Vorschau bleibt am Handy oben stehen (Michael, 12.11.2026: Änderungen gleich sehen) – wie beim Schildgenerator (sticky aus schild.css).
     Darum klein und ohne Zusatztexte, damit darunter genug Platz zum Einstellen bleibt; Warnungen bleiben sichtbar. */
  .bs .sg-vorschau-spalte { box-shadow: 0 8px 12px -10px rgba(74, 47, 34, .35); }
  .bs .bs-info { display: none; }
  .bs .sg-zusammen { margin-top: 4px; }
}

.bs-widerruf { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff6e8; border: 1px solid #f0dcb8; font-size: 14.5px; line-height: 1.5; color: #5b4326; }
.bs-widerruf a { text-decoration: underline; }
/* Am Handy über der Vorschau scrollen (Michael, 12.11.2026): hier wird nichts gezogen – schild.css sperrt sonst das Wischen (touch-action: none) */
.bs .sg-vorschau svg, .bs .sg-vorschau { touch-action: auto; user-select: auto; -webkit-user-select: auto; }
/* Schritt 3 am Handy unter dem Raster (js/buchstabe.js) – dort läuft die Vorschau nicht mehr mit */
.bs-unten { padding-top: 14px; }
.bs-unten:empty { display: none; }
/* Silk-Gold: Farbfeld mit Glanz statt flachem Braun */
.bs .sg-farbe.sg-farbe-gold i { background: linear-gradient(135deg, #c18f26 0%, #f6dc86 22%, #d9a736 40%, #fff1b0 55%, #cf9a2a 72%, #f4d77c 88%, #bb8820 100%) !important; }
.bs-effekt-wo { margin: 0 0 16px; }
.bs-wo { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-wo-knopf { min-height: 42px; padding: 0 16px; border: 1.5px solid var(--neu-linie, #e6dacd); border-radius: 999px; background: #fff; cursor: pointer; font: 700 14px/1 var(--font-body, sans-serif); color: var(--neu-tinte, #2b211c); }
.bs-wo-knopf[aria-pressed=true] { border-color: var(--neu-terra, #a24a27); background: var(--neu-creme, #faf6f1); }
.bs-effekt-wo[hidden] { display: none; }

/* Kopf flacher (Michael, 12.11.2026: „Kopfbereich zu hoch, nicht nutzerfreundlich“) – nur hier, nicht in schild.css (Hundemarke/Schild).
   Titel und Preis in einer Zeile, Vorteile nebeneinander, das große Kopfbild entfällt (die Vorschau zeigt den Buchstaben ja gleich darunter). */
.bs .sg-kopf { padding: 18px 0 14px; }
.bs .sg-kopf-raster { grid-template-columns: 1fr; gap: 0; }
.bs .sg-kopf .sg-kopf-bild { display: none; }
.bs .sg-kopf-raster > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 22px; }
.bs .sg-eyebrow { flex: 0 0 100%; margin-bottom: 2px; }
.bs .sg-kopf h1 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); }
.bs .sg-pauschal { margin: 0; padding-bottom: 8px; }
.bs .sg-pauschal-text { font-size: clamp(26px, 2.8vw, 34px); }
.bs .sg-vorteile { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 6px; }
.bs .sg-vorteile li { font-size: 14px; }

/* Vorschau am PC fest (Michael, 12.11.2026: „Vorschau fixieren, nur rechts soll sich bewegen“): Die linke Spalte bleibt oben stehen
   und passt immer ganz ins Fenster; gescrollt werden nur die Einstellungen rechts. */
@media (min-width: 961px) {
  .bs .sg-raster { padding-top: 20px; padding-bottom: 40px; }
  .bs .sg-vorschau-spalte { top: 78px; max-height: calc(100vh - 92px); overflow: hidden; }
  .bs #bs-svg { max-height: calc(100vh - 230px); }
  .bs .bs-info { font-size: 13px; }
}
@media (max-width: 960px) {
  .bs .sg-kopf { padding: 12px 0 10px; }
  .bs .sg-vorteile { display: none; }   /* stehen in Schritt 1 bzw. beim Preis, am Handy zählt jeder Zentimeter */
}
/* Kein Verrutschen beim Laden (Powerwartung 13.11.2026, Lighthouse CLS 0,07): Lade-Platzhalter so groß wie die spätere Vorschau. */
.bs #bs-lade { box-sizing: border-box; aspect-ratio: 235 / 232; max-height: 72vh; padding: 0 20px; display: grid; place-items: center; }
.bs #bs-lade[hidden] { display: none; }
.bs .sg-vorschau-spalte:has(#bs-lade:not([hidden])) #bs-zusammen { min-height: 52px; }
@media (max-width: 640px) { .bs #bs-lade { max-height: 34vh; } }
@media (min-width: 961px) { .bs #bs-lade { max-height: calc(100vh - 230px); } }