.bh-form, .bh-preview { max-width: 1120px; margin: 20px auto; padding: 16px; }
.bh-sub{ color:#64748b; margin-top:-6px; }
/*
  IMPORTANT:
  .bh-grid is the wrapper for the wizard steps. Only ONE step is visible at a time.
  Using a 2-column grid here makes the visible step appear "half width" (the other
  column is empty because hidden steps use display:none). That caused the form to
  look like it only uses ~1/3–1/2 of the page on desktop.

  We keep .bh-grid ALWAYS single-column and instead use .bh-fields-grid inside each
  step for the real 2-column field layout.
*/
.bh-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bh-form section { border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px; background: #fff; }
.bh-form label { display:block; margin: 10px 0; font-size: 14px; }
.bh-form input, .bh-form select, .bh-form textarea { width:100%; padding:10px; border:1px solid #d1d5db; border-radius:12px; }
.bh-form small{ display:block; }

/* Order form layouts */
.bh-form{ width:100%; max-width: 1120px; margin: 20px auto; padding:16px; }
/*
  Wide layout: break out of theme/Elementor containers that may cap the width.
  This makes the form span the viewport, while keeping content nicely centered.
*/
.bh-form--wide{
  width:100%;
  max-width:1140px;
  margin: 20px auto;
  padding-left: 16px;
  padding-right: 16px;
  float:none;
  display:block;
}

.bh-form--wide .bh-form-inner{
  max-width: none;
  margin: 0;
}

/* Field grid inside steps (real 2-column field layout) */
.bh-fields-grid{ display:grid; grid-template-columns: 1fr; gap: 12px 14px; align-items:start; }
.bh-fields-grid > label{ margin:0; }
.bh-fields-grid .bh-hint{ margin: 0; }
.bh-fields-grid .bh-two{ margin-top:0; }
.bh-full{ grid-column: 1 / -1; }
@media (min-width: 900px){
  .bh-form--cols-2 .bh-fields-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .bh-fields-grid{ grid-template-columns: 1fr; }
}
.bh-btn { color:#0f172a; padding: 10px 14px; border-radius: 14px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; text-decoration:none; display:inline-block; }
.bh-primary { border-color:#0f172a; background:#0f172a; color:#fff; }
.bh-hint { color:#6b7280; font-size: 13px; margin-top: 10px; }
.bh-carousel { display:flex; gap: 12px; overflow-x:auto; overflow-y:hidden; padding: 10px 4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; }
.bh-carousel{ scrollbar-width: thin; }
.bh-carousel::-webkit-scrollbar{ height: 10px; }
.bh-carousel::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }
.bh-carousel::-webkit-scrollbar-track{ background: transparent; }
.bh-templates-chooser__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.bh-templates-chooser__hint{font-size:13px;color:#6b7280}
.bh-templates-chooser__nav{display:flex;gap:8px;align-items:center}
.bh-nav-ghost{ display:inline-block; padding: 8px 10px; border:1px solid #e5e7eb; border-radius: 12px; color:#94a3b8; background:#fff; font-size: 12px; user-select:none; }

/* Overlay arrows to ensure controls are always visible (some themes hide button text) */
.bh-carousel-wrap{ position:relative; }
.bh-carousel-arrow{ position:absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 999px;
  /* force visible controls even if the theme overrides button styles */
  appearance:none; -webkit-appearance:none;
  border: 1px solid #0f172a !important;
  background: rgba(15,23,42,.92) !important;
  color:#ffffff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.bh-carousel-arrow:hover{ background: rgba(15,23,42,1); }
.bh-carousel-arrow:focus{ outline: 3px solid rgba(14,165,233,.35); outline-offset: 2px; }
.bh-carousel-arrow--left{ left: -6px; }
.bh-carousel-arrow--right{ right: -6px; }
@media (max-width: 700px){
  .bh-carousel-arrow{ display:none; }
}
.bh-card { min-width: 300px; border:1px solid #e5e7eb; border-radius: 16px; background:#fff; padding: 12px; scroll-snap-align:start; }
.bh-card.is-selected{ border-color:#0ea5e9; box-shadow:0 10px 30px rgba(14,165,233,.18); }
.bh-card.is-selected .bh-badge{ border-color:#0ea5e9; }
.bh-card .bh-select.is-selected{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

/* Optional: if you use pricing cards with data-bh-package, highlight selected */
[data-bh-package].is-selected{ outline:2px solid rgba(14,165,233,.55); outline-offset:2px; border-radius:18px; }
.bh-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bh-title { font-weight: 700; }
.bh-badge{ font-size:12px; color:#0f172a; background:#f1f5f9; border:1px solid #e2e8f0; padding:4px 8px; border-radius:999px; white-space:nowrap; }
.bh-thumb { border:1px solid #e5e7eb; border-radius: 14px; padding: 12px; margin-top: 10px; background: linear-gradient(180deg,#fff,#f8fafc); display:flex; gap:12px; align-items:center; }
.bh-thumb{ cursor: default; }
.bh-thumb--img{ position:relative; padding: 0; overflow:hidden; display:block; background:#fff; }
.bh-thumb--img img{ display:block; width:100%; height:auto; }
/* Give thumbnails a readable A4-like viewport */
.bh-thumb--img{ aspect-ratio: 210 / 297; }

/* Magnifier / zoom button */
.bh-zoom-btn{ position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; border-radius: 999px; border:1px solid rgba(15,23,42,.18); background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; line-height:1; }
.bh-zoom-btn:hover{ background:#fff; }
.bh-zoom-btn:focus{ outline:2px solid rgba(14,165,233,.55); outline-offset:2px; }
.bh-thumb-photo{ width:56px; height:56px; border-radius:16px; object-fit:cover; }
.bh-thumb-lines{ flex:1; }
.bh-line{ height: 10px; border-radius: 999px; background: #e5e7eb; margin-top: 8px; }
.bh-line.w80{ width: 80%; } .bh-line.w55{ width:55%; } .bh-line.w70{width:70%;} .bh-line.w40{width:40%;}
.bh-modal{ position:fixed; inset:0; z-index:9999; }
.bh-modal-backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.65); }
.bh-modal-content{ position:relative; max-width: 1020px; margin: 40px auto; background:#fff; border-radius: 18px; padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.bh-modal-body{ max-height: 80vh; overflow:auto; border:1px solid #e5e7eb; border-radius: 14px; padding: 14px; background:#fff; }
.bh-close{ float:right; font-size: 20px; line-height: 1; }
.bh-thanks{ max-width: 900px; margin: 40px auto; padding: 18px; border:1px solid #e5e7eb; border-radius: 16px; background:#fff;}
.bh-downloads .bh-dl-row{ margin:10px 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Stepper */
.bh-stepper__progress{ display:flex; gap:10px; align-items:center; margin: 6px 0 14px; }
.bh-stepper__dot{ width:30px; height:30px; border-radius:999px; border:1px solid #d1d5db; display:flex; align-items:center; justify-content:center; font-weight:700; color:#0f172a; background:#fff; }
.bh-stepper__dot.is-active{ background:#0f172a; color:#fff; border-color:#0f172a; }
.bh-stepper__nav{ display:flex; gap:10px; align-items:center; margin-top: 14px; }

.bh-details { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.bh-details > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; }
.bh-details > summary::-webkit-details-marker { display:none; }
.bh-details__body { padding: 12px 14px 6px; border-top: 1px solid #e5e7eb; }

.bh-extras{ margin-top: 14px; border-top: 1px dashed #e5e7eb; padding-top: 12px; }
.bh-checkgrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 8px; }
/* Checkbox tiles: label left, checkbox right (prevents "versetzt" look) */
.bh-check{ display:flex; align-items:center; justify-content:space-between; gap: 12px; font-size: 14px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafa; }
.bh-check__label{ display:block; line-height:1.2; }
.bh-check input{ width:18px; height:18px; padding:0; border-radius:4px; flex: 0 0 auto; }
.bh-license{ margin-top: 10px; }
.bh-license__label{ display:block; font-weight:600; margin-bottom: 6px; }
.bh-two{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 700px){
  .bh-checkgrid{ grid-template-columns: 1fr; }
  .bh-two{ grid-template-columns: 1fr; }
}

.bh-recipient{ margin-top: 10px; padding: 10px 12px; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fafafa; }

.bh-repeater { margin: 10px 0 14px; }
.bh-repeater__head { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.bh-row { display:flex; gap: 10px; align-items:flex-end; margin-bottom: 8px; }
.bh-col { flex: 1; }
.bh-col--small { flex: 0 0 140px; }
.bh-btn--icon { padding: 10px 12px; border-radius: 12px; line-height: 1; }
@media (max-width: 700px){
  .bh-row { flex-direction: column; align-items: stretch; }
  .bh-col--small { flex: 1; }
}


.bh-review{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.bh-review__row{margin:6px 0;line-height:1.4}
.bh-review hr{border:0;border-top:1px solid rgba(0,0,0,.08);margin:10px 0}

.bh-card-actions{ display:flex; gap:10px; margin-top:10px; }
.bh-select.is-selected{ outline:2px solid #0f172a; }

/* Live preview thumbnails (shows dummy images, consistent ratio) */

/* Template chooser thumbnails (A4 ratio, full-bleed image) */
.bh-card .bh-thumb{
  padding:0;
  background:#fff;
  overflow:hidden;
  aspect-ratio: 210 / 297;
  align-items:stretch;
}
.bh-thumb-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


/* Live iframe thumbnail (shows Mustertext + Foto) */
.bh-thumb-live{ width:100%; height:100%; overflow:hidden; position:relative; background:#fff; }
.bh-thumb-live__inner{ width: 840px; height: 1188px; transform-origin: top left; }
.bh-thumb-live__frame{ width: 840px; height: 1188px; border:0; display:block; background:#fff; pointer-events:none; }
.bh-carousel.is-dragging{ cursor: grabbing; }
.bh-carousel{ cursor: grab; }
.bh-templates-chooser__nav .bh-btn--icon{ min-width:44px; }
/* Zoom image in modal */
.bh-zoom{ width:100%; }
.bh-zoom__img{ width:100%; height:auto; display:block; border-radius: 12px; }
.bh-zoom__frame{ width:100%; height: 78vh; border:0; display:block; border-radius: 12px; background:#fff; }



/* Highlight: Ergänzende Angaben (optional) */
.bh-details--extras > summary{
  background:#fff7cc;
  border:1px solid #f1d36b;
  padding:12px 14px;
  border-radius:10px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.bh-details--extras > summary::-webkit-details-marker{ display:none; }
.bh-details--extras > summary .bh-extras-icon{
  font-size:18px;
  line-height:1;
}
.bh-details--extras > summary .bh-extras-title{
  font-weight:800;
}
.bh-details--extras > summary .bh-extras-hint{
  margin-left:auto;
  font-size:12px;
  opacity:.8;
}
.bh-details--extras[open] > summary{
  background:#fff1a6;
}
.bh-details--extras{
  margin-top:14px;
}