/* ---------------------------------------------------------------------------
   Deko-Ecken aus der gedruckten Karte, in den Logofarben.

   Die vier Ecken liegen auf einem ::after-Element, nicht auf dem Element
   selbst. Grund: Flaechen tragen oft zugleich die Klasse gmb-paper mit der
   Papierstruktur als background-image - zwei Regeln um dieselbe Eigenschaft
   wuerden sich gegenseitig ueberschreiben, und die Struktur erschiene nur
   einmal statt gekachelt.

   Verwendung in Elementor: Container -> Erweitert -> CSS-Klassen
     gmb-frame        dunkelgruene Ecken (auf Papierflaechen)
     gmb-frame-light  goldene Ecken (auf Fotos)
   --------------------------------------------------------------------------- */
:root {
  --gmb-frame-inset: 16px;
  --gmb-frame-size: 56px;
}

.gmb-frame,
.gmb-frame-light { position: relative; }

.gmb-frame::after,
.gmb-frame-light::after {
  content: "";
  position: absolute;
  inset: var(--gmb-frame-inset);
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: var(--gmb-frame-size) var(--gmb-frame-size);
}

.gmb-frame::after {
  background-image:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523113637%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523113637%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g transform=%22translate%28100%2C0%29 scale%28-1%2C1%29%22><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523113637%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g transform=%22translate%280%2C100%29 scale%281%2C-1%29%22><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523113637%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g transform=%22translate%28100%2C100%29 scale%28-1%2C-1%29%22><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>");
}

.gmb-frame-light::after {
  background-image:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523f0c018%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523f0c018%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g transform=%22translate%28100%2C0%29 scale%28-1%2C1%29%22><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523f0c018%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g transform=%22translate%280%2C100%29 scale%281%2C-1%29%22><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%2523f0c018%22 stroke-width=%222.6%22 stroke-linecap=%22square%22><g transform=%22translate%28100%2C100%29 scale%28-1%2C-1%29%22><path d=%22M100 23.4H32.5V41.4H15.2V100%22/><path d=%22M21.4 29.5H27.7V35.7H21.4Z%22/><path d=%22M27.7 35.7H32.5%22/></g></svg>");
}

@media (max-width: 900px) {
  :root {
    --gmb-frame-inset: 10px;
    --gmb-frame-size: 42px;
  }
}