/* BK Produkt Konfigurator – Messhilfe "Richtig messen" + Winkelhilfe "Winkelgröße bestimmen"
   Übernommen aus dem Shopify-Widget (Stand 15.09.2026), Farben fest auf die Gewebe-Profi-Palette
   (Enfold-Theme insektenschutz: #54b0e9 / #3290c7 / #394755 / #d7f0ff). */
.bk-mh, .bk-wh {
  --bk-h-accent: #3290c7;        /* Linien, Pillen, aktive Punkte – dunkleres Markenblau (Kontrast zu Weiß) */
  --bk-h-accent-light: #54b0e9;  /* Markenblau hell – Rahmen-Hover, weiche Flächen */
  --bk-h-surface: #ffffff;
  --bk-h-paper: #f5fbff;         /* sehr helle Markenfläche statt Beige */
  --bk-h-line: #cfe6f5;
  --bk-h-ink: #394755;
  --bk-h-ink-soft: #5b6b79;
  --bk-h-green: #1d9e75;
  --bk-h-red: #c2004b;
  --bk-h-frame: #cfd6dc;
  --bk-h-glass: #d7f0ff;
  --bk-h-opening: #eef6fb;
  --bk-h-sash: #5a6570;
  max-width: 520px;
  margin: 0 auto 16px;
  padding: 14px;
  position: relative;
  background: var(--bk-h-paper);
  border: 1px solid var(--bk-h-line);
  border-radius: 14px;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--bk-h-ink);
}
.bk-mh *, .bk-wh * { box-sizing: border-box; }
.bk-mh__title, .bk-wh__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; text-align: center; color: var(--bk-h-ink); padding: 0 26px; }
.bk-mh__step, .bk-wh__step { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--bk-h-ink-soft); text-align: center; min-height: 2.6em; }
.bk-mh__svg { width: 100%; height: auto; display: block; }
.bk-mh__layer { opacity: 0; transition: opacity .6s ease; }
.bk-mh__layer[data-layer="closed"] { opacity: 1; }
.bk-mh__controls, .bk-wh__controls { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.bk-mh__dot, .bk-wh__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-h-line); transition: background .3s ease; }
.bk-mh__dot.is-on, .bk-wh__dot.is-on { background: var(--bk-h-accent); }
.bk-mh__replay, .bk-wh__nav {
  background: var(--bk-h-surface) !important; border: 1px solid var(--bk-h-line) !important; border-radius: 999px !important;
  padding: 6px 12px !important; margin: 0 !important; font: inherit !important; font-size: 13px !important; line-height: 1.3 !important;
  cursor: pointer; color: var(--bk-h-ink) !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important;
  min-height: 0; height: auto; width: auto;
}
.bk-mh__replay { margin-left: 8px !important; }
.bk-wh__nav[data-wh-prev] { margin-left: 8px !important; }
.bk-mh__replay:hover, .bk-wh__nav:hover { border-color: var(--bk-h-accent) !important; color: var(--bk-h-accent) !important; }
.bk-mh__replay:focus-visible, .bk-wh__nav:focus-visible { outline: 2px solid var(--bk-h-accent) !important; outline-offset: 2px; }
.bk-mh__replay[hidden] { display: none; }
/* Winkelhilfe */
.bk-wh__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #e6eef4; }
.bk-wh__shot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.bk-wh__shot.is-on { opacity: 1; }
.bk-wh__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-wh__shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bk-wh__label, .bk-wh__lens-note {
  position: absolute; background: var(--bk-h-accent); color: #fff; font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.bk-wh__label { transform: translate(-50%, -50%); }
.bk-wh__lens-note { transform: translate(-50%, 0); font-size: 12px; padding: 4px 11px; }
.bk-wh__lens {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.45); background-repeat: no-repeat; overflow: hidden;
}
.bk-wh__lens svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-wh__result { margin: 10px 0 0; text-align: center; font-size: 13.5px; line-height: 1.4; }
.bk-wh__result:empty { display: none; }
.bk-wh__result b { color: var(--bk-h-accent); }
/* Rechte Spalte: Messhilfe über der Vorschau, Winkelhilfe darunter. Handy: Messhilfe über die Felder,
   Vorschau + Winkelhilfe darunter (display:contents macht die Kinder zu Grid-Zellen der Einspalten-Ansicht). */
@media (max-width: 600px) {
  .bk-cfg-images { display: contents !important; }
  .bk-cfg-images > .bk-mh { order: -1; }
  .bk-cfg-images > #bk-preview-wrap { order: 1; }
  .bk-cfg-images > .bk-wh { order: 2; }
}
.bk-mh__controls, .bk-wh__controls { flex-wrap: wrap; }
.bk-mh__replay, .bk-wh__nav { white-space: normal; }
@media (prefers-reduced-motion: reduce) { .bk-mh__layer, .bk-mh__dot, .bk-wh__shot, .bk-wh__dot { transition: none; } }

/* Vergrößern per Klick (Nutzer 18.09.2026): Knopf oben rechts, Klick auf Grafik/Foto öffnet die Box
   als Overlay in Groß; Schließen per ✕, Klick daneben oder Escape. */
.bk-h-zoom-btn {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0 !important; margin: 0 !important;
  border: 1px solid var(--bk-h-line) !important; border-radius: 6px !important; background: var(--bk-h-surface) !important;
  color: var(--bk-h-ink-soft) !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px !important; line-height: 1 !important; box-shadow: none !important; min-height: 0; z-index: 2;
}
.bk-h-zoom-btn:hover { border-color: var(--bk-h-accent) !important; color: var(--bk-h-accent) !important; }
.bk-mh__svg, .bk-wh__stage { cursor: zoom-in; }
.bk-h-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 100000; display: none; }
.bk-h-backdrop.is-open { display: block; }
.bk-mh.bk-h-zoomed, .bk-wh.bk-h-zoomed {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100001;
  width: min(92vw, 720px); max-width: none; max-height: 94vh; overflow: hidden; margin: 0;
  padding: 20px 22px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
/* Grafik/Foto an der Fensterhöhe begrenzen (Titel + Text + Steuerzeile ≈ 190 px), damit „Nochmal
   ansehen“ / „Zurück · Weiter“ immer sichtbar bleiben – auch bei Browser-Zoom oder flachen Fenstern. */
.bk-h-zoomed .bk-mh__svg { width: min(100%, calc((94vh - 210px) * 360 / 310)); margin: 0 auto; }
.bk-h-zoomed .bk-wh__stage { width: min(100%, calc((94vh - 240px) * 4 / 3)); margin: 0 auto; }
.bk-h-zoomed .bk-mh__title, .bk-h-zoomed .bk-wh__title { font-size: 20px; }
.bk-h-zoomed .bk-mh__step, .bk-h-zoomed .bk-wh__step { font-size: 16px; }
.bk-h-zoomed .bk-mh__svg, .bk-h-zoomed .bk-wh__stage { cursor: default; }
.bk-h-zoomed .bk-wh__label { font-size: 15px; padding: 7px 16px; }
.bk-h-zoomed .bk-wh__lens-note { font-size: 14px; }
.bk-h-zoomed .bk-wh__result { font-size: 15px; }
.bk-h-zoomed .bk-mh__replay, .bk-h-zoomed .bk-wh__nav { font-size: 15px !important; padding: 8px 16px !important; }
.bk-h-zoomed .bk-h-zoom-btn { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 16px !important; }
/* Platzhalter hält die Lücke in der Spalte, solange die Box im Overlay ist */
.bk-h-placeholder { border: 1px dashed var(--bk-h-line); border-radius: 14px; margin: 0 auto 16px; max-width: 520px; }