/* Collage-Vorschau (Prototyp 24.10.2026). Maße in mm über --mm = Breite der Druckfläche / 300. */

.collage-flaeche {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w, 300) / var(--h, 330); /* Seitenverhältnis der Druckfläche (Rücken 300×330, Brust 95×30) */
  container-type: inline-size;
  --mm: calc(100cqw / var(--w, 300));
}
.collage-flaeche.fassung-hell   { --rahmen: var(--hell-rahmen);   --flaeche: var(--hell-flaeche);   --halb: var(--hell-halb); }
.collage-flaeche.fassung-dunkel { --rahmen: var(--dunkel-rahmen); --flaeche: var(--dunkel-flaeche); --halb: var(--dunkel-halb); }

/* Aussparung: unter dem Logo plus 1,6 mm wird nichts gedruckt */
.collage-kacheln {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #000), var(--maske);
          mask-image: linear-gradient(#000, #000), var(--maske);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, calc(var(--mm) * (var(--logo-b) + 2 * var(--aus))) calc(var(--mm) * (var(--logo-h) + 2 * var(--aus)));
          mask-size: 100% 100%, calc(var(--mm) * (var(--logo-b) + 2 * var(--aus))) calc(var(--mm) * (var(--logo-h) + 2 * var(--aus)));
  -webkit-mask-position: 0 0, calc(var(--mm) * (var(--logo-x) - var(--aus))) calc(var(--mm) * (var(--logo-y) - var(--aus)));
          mask-position: 0 0, calc(var(--mm) * (var(--logo-x) - var(--aus))) calc(var(--mm) * (var(--logo-y) - var(--aus)));
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.collage-kachel {
  position: absolute;
  overflow: hidden;
}
.collage-kachel::after { /* Rahmen 1,2 mm, innen */
  content: "";
  position: absolute;
  inset: 0;
  border: calc(var(--mm) * var(--rahmen-mm)) solid var(--rahmen);
  pointer-events: none;
  z-index: 5;
}
.collage-kachel.grund-flaeche { background: var(--flaeche); } /* heller Stoff schwarz, dunkler Stoff weiss */
.collage-kachel.grund-halb    { background: linear-gradient(to right, var(--halb) 50%, transparent 50%); }

/* Bus in der Kachel: ganze Zeichenfläche, vergrößert und verschoben (Werte aus der JSON) */
.collage-bus {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
}
.collage-bus .bulli-vorschau__konfiguratorflaeche {
  position: absolute;
  inset: 0;
}
.collage-bus .bulli-vorschau__konfiguratorflaeche > div.elementor-1304 {
  position: absolute;
  inset: 0 !important;
  display: flex;
  align-items: center;
}
.collage-bus .bulli-vorschau__konfiguratorflaeche > div > div.elementor-element {
  max-height: 100% !important;
  margin: 0 auto !important;
}
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor,
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor-section-wrap,
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor-section,
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor-container,
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor-widget-wrap,
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor-widget {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Die Bus-Vorlage 1304 hat einen äußeren Container mit max-height 900 px (und Elementor-Breitenbegrenzung).
   Kleine Ausschnitte brauchen den Bus aber viel größer (Brust-Blinker: ~1800 px). Alles unter 900 px
   wurde abgeschnitten, die Blinker-Kachel blieb leer. Darum Höhe und Breite hier frei. */
.collage-bus .bulli-vorschau__konfiguratorflaeche .bulli-tpl-slot,
.collage-bus .bulli-vorschau__konfiguratorflaeche .e-con,
.collage-bus .bulli-vorschau__konfiguratorflaeche .e-con-inner,
.collage-bus .bulli-vorschau__konfiguratorflaeche > div > div.elementor-element {
  max-width: none !important;
  max-height: none !important;
  --container-max-width: none;
  --content-width: 100%;
}
.collage-bus .bulli-vorschau__konfiguratorflaeche .bulli-tpl-slot,
.collage-bus .bulli-vorschau__konfiguratorflaeche .elementor-1304 > .e-con {
  height: 100% !important;
}
/* Kundenhintergrund gehört nicht in die Collage, die Kacheln haben eigene Flächen */
.collage-bus .bulli-pa_hintergrundbild { display: none !important; }

.collage-kachel.art-grau .collage-bus { filter: grayscale(1); }

.collage-strich {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.fassung-dunkel .collage-strich { filter: invert(1); }

.collage-logo {
  position: absolute;
  left: calc(var(--mm) * var(--logo-x));
  top: calc(var(--mm) * var(--logo-y));
  width: calc(var(--mm) * var(--logo-b));
  height: auto;
  max-width: none;
  z-index: 6;
}
.fassung-hell .logo-dunkel,
.fassung-dunkel .logo-hell { display: none; }

/* ── Testseite ───────────────────────────────────────────── */
.myt3-collage--test {
  max-width: 560px;
  margin: 0 auto;
  padding-block: 24px 48px;
  font-family: 'Roboto', system-ui, sans-serif;
}
.collage-steuerung { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.collage-steuerung label { font-weight: 600; }
.collage-steuerung input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; text-transform: uppercase; }
/* Testseite gegen den Knopfstil des Themes abgeschirmt (der setzt Farben mit hoher Spezifität) */
.myt3-collage--test .collage-steuerung button { padding: 8px 14px !important; border: 0 !important; border-radius: 6px !important; background: #b91826 !important; color: #fff !important; font-weight: 600 !important; font-size: 15px !important; cursor: pointer; }
.collage-stoffe { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.myt3-collage--test .collage-stoff { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px !important; border: 1px solid #ccc !important; border-radius: 999px !important; background: #fff !important; color: #2a2925 !important; cursor: pointer; font: 500 14px/1.2 'Roboto', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.collage-stoff span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.myt3-collage--test .collage-stoff.ist-aktiv { border-color: #2a2925 !important; box-shadow: inset 0 0 0 1px #2a2925 !important; }
.collage-buehne { background: var(--stoff, #f4f4f2); padding: 10%; border-radius: 8px; }
.collage-status { margin-top: 10px; font-size: 13px; color: #555; font-variant-numeric: tabular-nums; }

/* ── Produktseite: Collage statt Bus in der Druckfläche (Druck-Design am Produkt) ── */
/* Über die Klasse, nicht die ID: die Lightbox klont die Fläche ohne ID */
.bulli-vorschau__konfiguratorflaeche.ist-collage {
  aspect-ratio: auto !important;        /* Druckfläche 300 x 330 statt Quadrat */
  overflow: visible !important;
  -webkit-mask-image: none !important;  /* keine Logo-Stanze des einzelnen Busses, die Collage hat ihr eigenes Logo */
          mask-image: none !important;
}
.bulli-vorschau__konfiguratorflaeche.ist-collage ~ .bulli-vorschau__logo { display: none !important; }

/* Das Kit rundet alle Bilder (8 px). Beim kleinen Logo schnitt das sichtbar ab. */
.collage-flaeche .collage-logo,
.collage-flaeche .collage-strich { border-radius: 0 !important; }

/* Galerie-Kacheln: die Galerie zieht jedes Bild auf volle Breite (.myt3-thumb img), hier zurücksetzen */
.myt3-thumb .collage-flaeche img.collage-logo { width: calc(var(--mm) * var(--logo-b)); height: auto; object-fit: fill; }
.myt3-thumb .collage-flaeche img.collage-strich { object-fit: fill; }